useContext React Hooks

When creating an application with React, there will be many situations where the user will need to pass down props to deeply nested components. Such as when you’re building a full-stack web application, where you need access to the current user when creating a login, sign-up, and profile pages. You can use Redux or make it even simpler, by using the Context API. At first, the API for context was a bit difficult to use with class components, but the creation of React Hooks helped paved the way for simplistic code, and thus the useContext hook was created.

A brief intro into Context API:

So you probably are wondering what Context API is? Firstly, we need to know how React works with components, and how data is passed between those components. This is where we will use state, which will store the data as props. Now, this props system works well to an extent. The props system allows you to pass down data from a parent component to its direct child component. The Context system allows you to pass data from a parent component down to any nested child component. So with Context API, you can choose which certain pieces of data will be available to all components nested inside that particular context. Think of it as a semi-global state that is available anywhere inside the context.

You’re probably saying to yourself, ‘WOW the useContext can replace redux…”

NO! That is not what useContext is used for, at its core it is only used only to communicate data, and that is it.

Here’s how a Props System works, Data is passed down to its direct child in the form of props

How Context API works — State is accessible anywhere within that context

To get a better understanding of Context API, here’s an example...

const ExampleContext = React.createContext()

function App() {
  const [theme, setTheme] = useState('dark')

  return (
    <ExampleContext.Provider value={{ theme, setTheme }}>
      <ChildComponent />
    </ExampleContext.Provider>
  )
}

So in this first step, you will be creating a new context using React.createContext. When we create a context we will be storing that into the ExampleContext variable. This variable will be an object with two properties: Provider and Consumer.

So what is the Provider? The provider is what allows the child component to be able to access the Context’s value. In this particular example, the object’s value is a single object with the theme and setTheme properties. So the provider basically provides the state/value to our component no matter how deeply nested they are from their parent.

function ChildComponent() {
  return <GrandChildComponent />
} 

Now on to the consumer. The consumer is what you have to wrap your code in to be able to access the value of the context. This component will expect a function that has a child

class GrandChildComponent {
  render() {
    return (
      <ExampleContext.Consumer>
        {({ theme, setTheme }) => {
          return (
            <>
              <div>The theme is {theme}</div>
              <button onClick={() => setTheme('light')}>
                Change To Light Theme
              </button>
            </>
          )
        }}
      </ExampleContext.Consumer>
    )
  }
}

Let’s try using the useContext hook from React, which will make using Context API simpler. So, to use useContext within a functional component, you don’t have to actually wrap our JSX code around the consumer, in fact, you can pass your context into your useContext hook and it does the process all for you.

function GrandChildComponent() {
  const { theme, setTheme } = useContext(ExampleContext)
  return (
    <>
      <div>The theme is {theme}</div>
      <button onClick={() => setTheme('light')}>
        Change To Light Theme
      </button>
    </>
  )
}

And just like that! useContext works like magic. It eliminates the middle man for you. Instead of setting up the Context like the traditional way. The useContext hook helps simplify your code and makes using Context API so much easier.

Conclusion:

The use of useContext helps simplify the traditional Context API route. Which makes React Hooks even more versatile to use.