flat-fuchsia

Using Zustand, React Query, and Jotai

Hey folks, I'm trying to understand when I should use each of the above technologies. From what I understand, React Query is a server-state library for keeping your client updated with the state coming from the server. Zustand is a client state library used to store data coming from the server...? Jotai is good for storing one off "atoms" (which I'm assuming are basically stuff that you'd usually store in localStorage, etc?). Are those accurate use cases for each?

5 Replies

mute-gold•3y ago

We are using RQ to manage all server state and react hooks for application state. We don't need to use a state management library now and have removed Redux from our codebase 🙂

flat-fuchsiaOP•3y ago

Yeah from what I understand, RQ can basically replace client state managers like the above. I guess I'm just curious if there's still any use case for it then in that case? It seems like Tanner Linsley is using it as well so I got curious why https://twitter.com/tannerlinsley/status/1293640999533568000?lang=en

Tanner Linsley (@tannerlinsley)

I'm using #ReactQuery with Zustand and really liking the pairing. It's a super tiny, very flexible, no-nonsense client-state solution for React. If I were to write a client-state solution from scratch, it would likely resemble Zustand in many ways. https://t.co/66GjKIr8hw

Likes

229

Twitter

dependent-tan•3y ago

I am curious too. I am having doubt right now about a case where I might need props return by useQuery and useMutation but I am only forwarding data down the component tree... I was asking myself if any of these libraries would help solve this case or if it's a better practice to always pass down the entire query object vs the query.data property.

sunny-green•3y ago

From what I can say, there is probably still some client state left that you'd need to make accessible to your application. For example, let's say you have a todo list and the user can filter that. The filters will have to go into the queryKey of react-query. But how do you get access to the filters in a random component somewhere else in your component tree where you want to call useTodos() ? That's where making that client state (filters) globally available comes in:

const useTodos = () => {
  const filters = useFilters()
  return useQuery(['todos', filters], () => fetchTodos(filters)
}

const useTodos = () => {
  const filters = useFilters()
  return useQuery(['todos', filters], () => fetchTodos(filters)
}

now how useFilters is implemented is up to you. You can put the filters in redux once the user hits apply. or in a zustand store. or in a jotai atom. Or in a context provider. Or you write it to the url and read it with useParams (I like this one a lot because it gives you sharable urls for free: myapp.com/todos?done=true&name=foo you can also just store it in local state in your app and pass it down as props, nothing wrong with that on a small scale:

function App() {
  const [filters, setFilters] = useState()
  return (
   <div>
     <FiltersForm filters={filters} setFilter={setFilters} />
     <TodoList filter={filters} />
   </div>
  )
}

function App() {
  const [filters, setFilters] = useState()
  return (
   <div>
     <FiltersForm filters={filters} setFilter={setFilters} />
     <TodoList filter={filters} />
   </div>
  )
}

whatever works for you 🙂

flat-fuchsiaOP•3y ago

Ohhh that's interesting, I haven't thought of using it in that way before. Is there a bigger example of this documented somewhere by any chance?

Gaming

Programming

Using Zustand, React Query, and Jotai

Did you find this page helpful?