React — Why useContext() will clean your code

Apr 26 · 3 min read
Photo by Daiga Ellaby on Unsplash

Quick Intro

I wanted to write a quick article to just explain how neat the useContext() hook can be utilized in React to clean up your code (there are many other uses to React Hooks but we will simply just look at useContext). I have seen that many developers are still a bit weary adopting some of these hooks (possibly because it only was released in the stable build of React this past February and some don’t see the need for it) [see the Official React Blog Post for more details]. The post is written by the great Dan Abramov who all of us React developers look up to, so give it a read when you get a chance. When you get curious for more info, visit the Official React Docs on Hooks that go in-depth on React Hooks and why they think they are so awesome (I think they are too).

The Before

I’m going to be making the assumption here that you have already been exposed to the React Context API and understand (at least on a surface level) how it works. Generally, utilizing Context in React allows us to pass data/information throughout the entire component tree without having to manually pass down props at every single level (i.e. passing down props to components that don’t need them). For those of you that are familiar with Redux or other state-management systems, you may already have a bit of knowledge in this area.

Let’s take a look at a component that utilizes the React Context API, but does not utilize useContext():

As you can see in the example, I want my TitleBar of my App to be aware of the user’s username (which was provided by my top-level component). So in order to avoid passing down props through several components, I utilized the <Context.Consumer /> element that React gives us through the Context API. This all works, but we can make this all a bit cleaner with useContext().

As a quick note: If you are curious, the highest level component must also have a “Provider” that supplies all next Components with access to the context. It simply looks like this:

<UsernameContext.Provider value={this.state.user}>  /*
Any components that reside within the Provider
will have access to the value of the context
*/
<Header /> /*...Other code here...*/</UsernameContext.Provider>

If any of the above code looks foreign to you, please take a look at the React Context Official Docs. A Provider is still necessary for your React useContext Hook to work properly.

The After

After utilizing useContext() our code becomes less nested:

We were able to replace all of our <UsernameContext.Consumer /> boilerplate with a simple call to useContext():

const userData = useContext(UsernameContext);

Then, just utilize userData wherever needed in your component. It’s as simple as that folks.

Closing Thoughts

I hope this clears up some of the confusion with React Hooks and why we now have an alternative way to access Context in React. Please remember, these features will always be backward compatible with the legacy React Context API and there are no plans by the React team to force developers to use React Hooks. They are just another tool on your belt, feel free to use it when you feel necessary.

Happy Coding!

Grow your Developer Toolbelt

Michael Majdanski

Written by

Javascript Explorer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade