React is the most popular framework in 2020 for Front-end development. The reason behind React’s success is short learning curve and how fast it can get your App up and running. But there is one concept in React that most developers struggle to wrap their head around aka State Management.

Libraries like Redux, MobX are built around React to handle the state but they can be intimidating to learn for a new and upcoming developer. In this article I am going to explain how you can manage a state using React’s inbuilt Context API and Hooks. Once you master the concepts of State Management using React’s inbuilt features, it will save you a lot of pain when you learn Redux.

What is State Management?

Beginning from React 16.8, every React component, both class and functional ones, can have a state. To put it simply, State is a JavaScript object that represents the components Memory. It can be changed anytime as a result of users actions or events. State can be passed down the component tree in a process called props drilling.

As the app gets bigger it becomes more and more difficult to manage state and props drilling makes it harder to keep track of all dependencies. A better solution is to simply separate the state from the app using Context API and then share it where it is needed.

#reactjs #react #state-management #web-development