Managing State in React

Photo by Juanjo Jaramillo on Unsplash

What is a State?

State is a built-in object in react that is used to contain data or information about the component.

There are different types in managing the state

1. Local UI state
2. Global UI state
3. Server State
4. Url State

Local UI state:

The Local UI state is used to manage state between one to another component when there is a change in the props.

useState tool can be used to manage state between one to another component.useReducer is another option that can be used for better and easier code.

This is easiest method to manage the state and is often used by many developers

Global UI State:

The Global UI state is used to manage state between multiple components when there is a change in the props. If there is a Update in state then you have callback to update the state from components and it takes up a lot and lot of props.

This is where we change it to Global UI State. To Achieve it we can go for any third- party solution. But many developers are used to achieve it through the built-in react features the Context API to manage the state

The Use Of ContextAPI is Not recommended Because Its nothing but to avoid props drilling. The Behaviour of contextAPI is to re-render all children components if value of the props is changed.If You do not want to Update all the children you only want to re-render if there is a change in a props.its not of good use.

Redux is great to use for Global State management Redux toolkit gives all The benifits For Global State management.

Server State:

Server State are the data that comes from the external server that needs to be integrated to the UI.It is hard to manage With all the local ang global state.

There are several tools like SWR and React query can be used To manage The Server State easier.

These Libraries gives convenient hook to get and change data from API and also Keep track of all necessary state and cache data.

URL state:

URL state are the data that exists on the URLs like the pathname , query parameters etc. URL state is not considered by many developers but it is an important one to consider.A lot of important part of application is based on accessing the URL state.

URL State is already managed if you are using frameworks like Next.js or react Router latest Version

URL state is easy to manage through custom hooks like useLocation or useHistory if you are using React Router.Most Of The developers now prefer using react-router for URL state Management.If you are Next.js it can be handled using useRouter.