React Context Hook

React Context is a vital tool that allows for easy sharing of data throughout your application.

What is React Context?

React Context is a method in which data can be shared without having to manually pass down props through several nested children components.

From reactjs.org

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

When to use React Context?

Context is best used when sharing data that is considered "global."

Some examples may include:

User authentication
User settings
Language
Themes

React Context helps us solve the problem of prop drilling, a term used to describe when props are passed down through multiple levels of components.

Let's look at an example of this. Here, we have some data living in ComponentA and we need that data passed to ComponentD.

const ComponentA = () => {
    const [data, setData] = useState("")
    return (
        <ComponentB data={ data } />
    )
}

const ComponentB = ({ data }) => {
    return (
        <ComponentC  data={ data } />
    )
}

const ComponentC = ({ data }) => {
    return (
        <ComponentD  data={ data } />
    )
}

const ComponentD = ({ data }) => {
    return (
        <h1>"Hello World!"</h1>
        <h1>{ data }</h1>
    )
}

As you can see, data is being passed at each level, but is not actually used in the middle components. This process can be tedious.

Using React Context

When using React Context, we must do three things: create, provide, and consume.

Create

Create a new file that uses createContext and exports a Provider wrapper:

import React, { createContext, useState } from 'react'

export const Context = createContext()

export const ContextProvider = ({ children }) => {
    const [data, setData] = useState({})

        return (
                <ContextProvider.Provider value={{ data }} >
                        { children }
                </ContextProvider.Provider>
    )
}

Within our provider wrapper, we are able to pass a value prop that will contain our data.

Provide

Now that we have our context created, lets add it to our example.
To do this, we will have to import the provider to one level above the consuming component. In this case, ComponentD only needs the data, so we have to import our provider to ComponentC.

import React from 'react'

import { ContextProvider } from './Context'
import { ComponentD } from './ComponentD'

const ComponentC = () => {
        return (
                <ContextProvider>
                        <ComponentD />
                </ContextProvider>
        )
}

Consume

And finally, we can now consume the data in ComponentD by using the useContext hook.

import React, { useContext } from 'react'

import { Context } from './Context'

const ComponentD = () => {
        const { data } = useContext(Context)
    return (
        <h1>"Hello World!"</h1>
        <h1>{ data }</h1>
    )
}

And that is it!