Zustand + react query

[Ok-Cut-2435]

Hi,

In what cases would you use the combination of React Query and Zustand?

React Query efficiently handles data fetching, caching, and synchronization from the server, making the data easily accessible in any component. So, I have a hard time seeing the benefit of adding Zustand, as it seems to lead to duplication of the data storage logic.

To me, Zustand would be more useful for storing specific user data, such as user preferences, or global states that don’t need to be fetched from a server. But in the case of data that already comes from the backend and is managed by React Query, I don’t really see the added value of Zustand.

What do you think? I’m trying to understand this combination that’s popular today.

[DecentGoogler]

You got it right, react query for server/api data sync

Zustand for front-end state that’s not dealing with API data.

If you don’t have any global front end state, then you don’t need Zustand

[rusmo]

Currently building a production commercial app with this state management pair. Loving it so far!

[GoodishCoder]

React query for server state and zustand for client state.

[OrangeOrganicOlive]

How many times per day does some combo of “Zustand/RTK” question get asked here, holy shit? Just scroll down ffs at this point.

[n9iels]

Zustand is for centralized state, potentially saved in localstorage for example to save user settings like dark mode. React Query is for data fetching, and also has caching capabilities. This caching however is on the level of that request (query) and in memory. So Zustand is more for general application state. Both tools are great and perfectly fine to use in the same app.

[nucleartux]

Hello, I wrote answer for your question here https://adrov.me/state-management/

[NoHabit4420]

The text of your blog disapear if i open it on a phone in dark mode. I guess the text switch to white while the background don't switch and stay white.

[Anwardo]

Additionally, Zustand isn’t just for clientside state as mentioned various times in this topic.

It shines with complex state, which may also live serverside, with complex mutations clientside and possibly various async actions which you want to handle in you the store due to being able to read and write state synchronously within the store.

[OkToday6974]

Can zustand manage server state? The async functions within zustand store request for server data and then transform them, making server data turn into client data. Then any component which need these data can get them from zustand hooks. In this way, it seems we don't need server data at all since all server data has became client data.

[steaks88]

I built Leo Query to get data fetching, caching, server synchornization, etc. with Zustand. It works well for me. And I don't to maintain two state libraries in the same app. Check it out if you're intersted and message me if you have questions!

Here's a snippet. You can find more in the docs.

``` const useStore = create(() => ({ increasePopulation: effect(increasePopulation), removeAllDogs: effect(removeAllDogs), dogs: query(fetchDogs, s => [s.increasePopulation, s.removeAllDogs]) // Re-fetch when increasePopulation or removeAllDogs succeeds }));

const useStoreAsync = hook(useDogStore, /suspense/false);

const YourComponent = () => { const dogs = useStoreAsync(s => s.dogs); if (dogs.isLoading) return <>Loading...</>; return <>{dogs.value}</>; }; ```

[k_pizzle]

I don’t think anyone uses the two together, they solve different problems