State management in React
WebDev
Posted on May 28, 2022
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.
Posted on May 28, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 30, 2024
November 30, 2024