From Props to Context: Simplifying State Management in React

Sun, 07 Jul 2024 06:47:54 +0000

Introduction

Hey guys . Are u tired of passing of endless props and state variables to the child components while creating an application in React ? Well this post is just your ultimate saviour from that chaos. In this post I'll devlve into the uses of useContext api in your react applications, which makes your work not only faster but a tad bit easy.

Before diving into the details, I want to give you a visual aid that will act as the cherry on top of this blog!

Okay, so first, imagine a store in your locality. Now, this store in useContext will be your GlobalProvider component. Just as the store is only accessible to the people present in its locality, the GlobalProvider component wraps the components we want to make the state data accessible to, essentially extending its "locality" to these specific components. ️

This is just the gist of it all, and I know it seems a little confusing, but when we dive deep into the examples, things will get easier—trust me on this!

Creating context

Now, the first step is to import the createContext function into our GlobalProvider component. This component will be our store , which will provide its items (state data) to its public (components). Let's take a look at it:

In this code, we are creating a context using createContext and passing initialState, which consists of a string 'default value', to it. However, this value gets overridden by another value passed to the value prop of the <GlobalState.Provider> component. This is actually our Provider component created from the context named GlobalState.

In simple terms, to provide our state data to any component, we need to wrap them with the Provider component created from the context name, like GlobalState.Provider .

In case you are wondering what the children prop of the GlobalProvider component means here, it is actually a prop that is available to all components. It refers to any child component of the component using the children prop. So, it means that any component wrapped by the GlobalProvider component will get access to the state variables. This is because we are wrapping the children of the GlobalProvider component with the provider (GlobalState.Provider) of the state variables.
If you wish to pass more than one value to all the components, you can do so by writing the values as an object in the value prop like this: value={{ firstValue: 'first value', secondValue: 'second value' }}.

Wrapping components by wrapper component

Before we move on to using the values in the components, we need to wrap the components with our wrapper component, which in this case is the GlobalProvider component. Don't forget the concept of how in order for a person to get access to the items of a store, they need to be present in the store's locality. This is how you would do that:

Also, keep in mind that whenever any of the values passed to the value prop changes, all the child components of the Provider component, the ones using the useContext hook to extract the values, will re-render whether they use the values in the jsx or not.

Using useContext hook to access state data

Finally, we can now use the values of our state using the useContext hook of React. This hook expects a context, which in our case is GlobalState (don't forget to export it from our GlobalState.js file).

First, let's take a look at the code :

Here, we simply import the useContext hook from React and pass GlobalState (created using createContext(initialState) imported from GlobalState.js). Since in the last example we passed an object to the value prop of GlobalState.Provider, we can now de-structure these values (firstValue and secondValue) from the object returned by useContext hook. In simple terms, the useContext hook returns the value defined in the value prop of the nearest Provider.

Conclusion

And there you have it! I hope this blog has made the tedious process of passing state and props among components a breeze. By harnessing React's useContext and GlobalProvider, managing state becomes seamless and efficient. Now, with cleaner code and reduced complexity, you're ready to build more scalable and organized React applications. If you wish to put this knowledge to a test, then I would suggest making a simple expense tracker in which you can do the following,

Make a minimalist UI using multiple components like for one for showing the history of transactions, one for showing the total income , etc.
You can create one state variable in your globalProvider component which will then be shared among all the components so that you can use these values to update the balance as well as for recording the history of transactions and much more!