Intro to React Hooks- Part 13

In Part 12 of this series, we went over how to fetch an individual post by passing in a post’s id to a GET request. We covered how to render a single post to the UI upon entering a post id in an input field, as well as on a button click.

Here in Part 13, we will learn about a new React Hook, the Context Hook- useContext. We’ll go over what exactly context is in React, and then take a look at an example of how to use the useContext Hook.

Intro

Per the React docs, context “provides a way to pass data through the component tree without having to pass props down manually at every level.” In most React applications data is passed down from parent to child components via props, but in certain cases this can be inefficient.

For example, when only certain components require these props but some of these components are child components, and so the parent components don’t necessarily need the props. Context allows us to share values or data between specific components without having to pass these props through all the levels of the component tree.

Example

For this example, we’ll be working with a couple different components. Let’s first take a look at the code in App.js:

// App.js
import React from 'react';
import './App.css';
import ComponentA from './components/ComponentA';
export const UserContext = React.createContext()
export const ChannelContext = React.createContext()
function App() {
  return (
    <div className='App'>
      <UserContext.Provider value={'Michael'}>
        <ChannelContext.Provider value={'ReactHooks'}>
          <ComponentA />
        </ChannelContext.Provider>
      </UserContext.Provider>
    </div>
  )
}
export default App

So, in the above code, we first create context using the createContext method. Then, we provide the context value in the JSX using Context.Provider.

Now let’s see how we can use the useContext Hook to consume the context value in another component, ComponentB, assuming this component is a child component of ComponentA:

// ComponentB.js
import React, {useContext} from 'react';
import { UserContext, ChannelContext } from '../App';
function ComponentB() {
  const user = useContext(UserContext)
  const channel = useContext(ChannelContext)
  return (
    <div>
      {user}-{channel}
    </div>
  )
}
export default ComponentB

Let’s go over the above code. First, we import useContext from React. Then, we import the necessary context. After that, we call the useContext function passing in the context as its argument. useContext returns the context value, so we assign the function called to a variable. Finally, we render these variables holding the context value in the JSX.

If we now take a look at the browser, we should see the expected output of ‘Michael-ReactHooks’.

Summary

Once again, context in React allows us to pass values through the component tree without having to pass props down manually at each level. And the useContext Hook is the best way to take advantage of this, allowing us to easily assign context values to variables and then rendering those variables in the JSX of a component.

Thanks as always for reading and see you next time!