Redux vs Context API vs Local Storage
React State Management
Managing state is not an easy thing for beginner and understanding the use of state management library is very important to make large and complex applications.
To manage state in any frontend web application their are mainly two ways to handle state of an application -
- Component level state, and
- App level state
Component Level State - For very small application in which handling state in easy and can be achieved by component state than that is termed as component level state which can not be accessed by any other component without passing it as props.
App Level State — For large application which requires to access state of any other component we need to pass it in as props in multiple levels of component tree which is quite complex task and not optimal for application performance to resolve this issue we use App level state which can be accessed and modified by any component in a tree.
To perform app level state management in react we can either store it locally in local storage or use Context API (Introduced in React v16.3) or use any state management library such as Redux note that their are few more options but Redux is the most popular one so far.
So the question is what to use? and When to use ?
Local storage - was introduced to store strings size upto 10MB and is mainly used to store cache files, site data etc but if you really want to store state of an application its a bad idea because in React or any frontend framework if we modify the state, component get re-rendered and the DOM (Document Object Model) gets updated.
If we Try to use local storage for state management in React the component will not gets re-rendered which might affect the purpose of React.
Context API - In React version 16.3 they introduces Context API to solve the issue of reducing the unnecessary passing of props in component tree rather used the concept of Producer and Consumer in which the component which needs to pass data can become Producer and component which need to acc data becomes Consumer.
Using Context API for passing data of application such as theme colour, device orientation etc which does not change in short interval of time would be fine but using it for state management would not be a good choice because it does not performs well for high frequency updates such as state (it changes very frequently).
Redux or Any State management Library - State management library are designed to handle state of complex applications. Redux manages the state of the entire application in a single immutable tree which you need not to worry about.
Redux is a better option to manage state of an application I recommend you to use since the starting of your application because you doesn’t know when your application starts growing.
Concluding
I hope you got to clear your doubt what and when to use Redux, local storage, and Context API.
About Me!
I am Harsh Digwani, JavaScript and MERN stack developer. You can connect with me on LinkedIn.
Thanks for Reading…
Don’t forget to share it with your friends and any doubt leaves the response down there.
