state-management.md

State Management

We can split the state in several categories:

UI State

This is the state that controls interactive parts of an application. Opening modals, notifications, changing color mode, etc. For best performance and maintainability, keep the state as close as possible to the components that are using it. Don't make everything global out of the box.

Good UI State Libraries:

• Context + hooks
• zustand
• constate
• redux
• mobx
• jotai
• recoil

UI State Example Code

Server Cache State

This is the state that comes from the server which is being cached on the client for further usage. It is possible to store remote data inside a state management store such as redux, but there are better solutions for that.

Good Server Cache Libraries:

• react-query - REST + GraphQL
• swr - REST + GraphQL
• apollo client - GraphQL
• urql - GraphQl

Server State Example Code

URL State

State that is being kept in the URL bar of the browser. Very useful for keeping pagination data of a list because even if the page gets refreshed, it will keep all the states in the URL bar so the user will see the same results.