State Management

VibeFast keeps the clients thin by letting Convex do the heavy lifting. The principle is simple: push as much state as possible to the server and keep only the UI bits on the client.

Server-first state

Most features read and write through Convex. The hooks from convex/react keep your UI automatically subscribed to changes, so your chat, tracker, payments, and AI workflows stay in sync without manual polling.

Reading data with useQuery

const conversation = useQuery(api.chatbot.getOrCreateConversation, { userId });

Every Convex query is real-time and typed, so you get consistent data everywhere.

Updating data with useMutation

const mutate = useMutation(api.tracker.recordFood);
mutate({ userId, entry });

Mutations run server-side business logic, validate inputs, and keep the store consistent for every client.

Client-only state

There is no global Redux store. Zustand is used sparingly for lightweight UI concerns that never belong in the backend, for example the authentication status that powers the AuthWatcher and navigation guards. The slice lives in apps/native/src/lib/state/auth-client-slice.ts.

For per-screen details (form inputs, tab visibility, animation state) rely on local React state with useState, useReducer, or useRef.

Summary: When to use what

This server-first approach minimizes client complexity and leaves Convex to manage consistency.