Separating server, persistent and interface state

Not every piece of state in a React Native application should live in the same store.

I generally separate state into three categories:

• Server state: data owned by an API
• Persistent client state: authentication, preferences and unfinished flows
• Temporary interface state: open modals, input values and selected tabs

In several projects, I used TanStack Query for server-owned data and a lightweight store for persistent client state. That separation provided:

• Predictable caching and refetching
• Targeted cache invalidation after mutations
• Less duplicated API data in global stores
• Persistent preferences without persisting entire responses
• Simpler screen-level state

The question I ask is: “Who owns the truth?”

If the backend owns it, it is probably server state. If the user expects it to survive a restart, it may be persistent client state. If it only matters while the screen is open, local state is usually enough.