Skip to main content

State Management

We use a hybrid approach to state management.

1. Server State (React Query)​

90% of the data in the app comes from the API (Horses, Alerts, Cameras). We use TanStack Query to handle:

  • Caching (Instant validity).
  • Background Refetching.
  • Optimistic Updates (UI updates before server confirms).
const { data: horses } = useQuery({
  queryKey: ["horses", stableId],
  queryFn: () => api.getHorses(stableId),
});

2. App State (React Context)​

For global application state, we use Context Providers.

  • AuthProvider: Stores the JWT token in SecureStore (biometric-ready) and exposes signIn/signOut.
  • SocketProvider: Maintains the Socket.io connection singleton.

3. Navigation State​

Handled implicitly by Expo Router based on the file system (app/(tabs)/index.tsx).