Data management

Till now data management or state management in React has been component-specific. When it comes to sharing the state between 2 different nodes in the React DOM tree we can do that by lifting the state up as shown in the previous lesson.

This becomes a matter of concern if we have a DOM tree like the one given below:

Let’s say there’s a state variable set by the J node which has to be used by the H node, in this case lifting the state up will have to go through multiple levels which leads us to the problem of prop drilling.

Prop drilling is the problem where we have to pass the prop multiple levels. In this case, we can use Redux or context API.

• Redux is a global state management tool that states there can be only a single global state. All the components can access the states using the methods provided by redux and can only update using pure functions (this means these functions take the previous state and an action and return the next state).
• Context API is a method where we create a provider which holds the store and any child of this provider will be able to access the store. This method ensures that we don’t need to pass down prop multiple levels below.