React Hooks - useContext

#javascript #webdev #beginners #react

What is it?

The useContext hook is a great hook to use when you need to send props down through multiple, nested child components.

Instead of passing it through every single component on the way down, you can define it in the parent component. Then, bring it into the nested component where you need it, while bypassing the middle components you'd normally have to send it through.

Here's an example

Let's say you have an App component. Inside that App component, you have a Profile component. Inside the Profile component, you have a Greeting component.

So that's:

App --> Profile --> Greeting

Now, let's say you have a user in your App (parent) component, and you want to pass the user property into the Greeting (nested child) component.

Normally, you'd have to send that property through the Profile component, then into the Greeting component. Like so:

//App.js
const App = () => {
  let user = 'Shred Flanders';
  return <Profile user={user} />
}

//Profile.js
const Profile = props => {
 return <Greeting user={props.user}/>
}

//Greeting.js
const Greeting = props => {
  return `Welcome, {props.user}!`
}

Create a context

To start using useContext, you must first create a context. So, in our App (parent) component, we'll import createContext from React. Then, create a user context.

//App.js
import { createContext } from 'react'
export const UserContext = createContext();

Note: we're exporting the UserContext so we can import it
into nested components later.

With that UserContext in place, we can wrap a provider around components, then consume the property in any child component.

So, we'll set that provider where we want it and pass it a property.

//App.js
import { createContext } from 'react'
export const UserContext = createContext();
const App = () => {
  let user = 'Shred Flanders';
  return (
  <UserContext.Provider value={user}>
    <Profile />
  </UserContext.Provider>
  )
}

Note that now, we're not sending the user property into Profile. We're sending it into the UserContext Provider via value={user}. We can then grab that value in any of the nested components.

Consume the context

To consume the value in any nested component, we have to import the useContext hook, and the context we want to use.

So in the Greeting component:

//Greeting.js
import { useContext } from 'react'
import { UserContext } from './App.js'

Then, we'll pass our UserContext into the useContext hook, letting the hook know which context we want to use.

const Greeting = props => {
  const user = useContext(UserContext);
}

The useContext will return the value that we sent into UserContext.Provider value={user}. We're saving it in the Greeting component to a constant variable, user.

Now, we're free to use that constant/value in our Greeting component.
(and we never had to touch the Profile component! 🎉)

const Greeting = props => {
  const user = useContext(UserContext);
  return `Welcome, {user}!`
}

Conclusion

The useContext hook is a very useful tool in React. It could be used for changing a theme and updating that theme in the different components it needs to. It prevents "prop drilling" like I've shown you here.

If you want a more visual example, check out my YouTube video here: