React state management

5 February 2023

Server state

For server state, you can fetch data in an effect and store it somewhere. You also need to manage error and loading states and caching and more. Therefore, most of the time, a data fetching library is used. The most popular ones are React Query, SWR, and RTK Query. These data fetching libraries provide error and loading states, caching, and more.

If your data from the server does not need interactivity, you can also use React Server Components, server-side rendering, or static site generation.

UI state

State that is used only for the UI is called UI state. For example, a state that tracks whether a menu is open or not.

I use the followings for the UI states:

Simple, local with some prop drillings -> useState

Simple, global -> Context or Jotai

Complex, global -> Zustand or Redux Toolkit