State management is one of the most important aspects of every app.
In a nutshell, it is a way to communicate and share the data across components
The app’s state dictates what users see, how the app looks, what data is stored, and so on.
There are four main types of state you need to properly manage in React app.
Local state
Local state is data we manage in one or another component.
It is most often managed in React using the useState hook.Global state
Global state is data we manage across multiple components.
There are the recommended libraries like Redux, Recoil, Jotai, Rematch, Zustand, Hookstate and in small to medium apps, we can use Context API for state management.Server state
Server state is data that comes from an external server that must be integrated with our UI state.
There are tools such as React Query and SWR that make managing server state much easier.URL state
Data that exists on our URLs, including the pathname and query parameters.
If you are using React Router, you can get all the information you need using useHistory or useLocation.
Additionally, if you have any route parameters that you need to use, for example to fetch data based off of, you can use the useParams hook.
If you are using Next.js, almost everything can access directly from calling useRouter.
Top comments (1)
This is always a great topic to talk about. You could talk about next about the different libraries and utilities that exist to manage that state.