Introduction to useContext: A React Hook

Photo by Gary Bendig on Unsplash

useContext is a React JS hook that allows users to ‘share’ context (or some value) with all the children elements within the context provider.

This allows certain flexibility, such as:

• Ensuring all child components use the same context value.
• No extra props are needed to be created to pass down the value from parent to child element.
• The value stays consistent, even if changed, across all the components using it.

Let’s look at the syntax of creating a React context object and how to use its context value in child elements.

Breaking down context creation:

// A sample create context instance in React (done at the Parent Node)
import React, { useState } from "react";
// some inner element that uses the context value
import { InnerElement } from "./InnerElement";

// context for the 'count' value
export const newContext = React.createContext();

// context for 'setCount'
export const newContextChange = React.createContext();

export const ThemeContext = () => {
  const [count, setCount] = useState(0);

  return (
    <newContext.Provider value={count}>
      <newContextChange.Provider value={setCount}>
        <InnerElement />
      </newContextChange.Provider>
    </newContext.Provider>
  );
};

Let’s break down each significant portion of the code and understand what it does and how it works.

Creating a new context:

creating a new context instance using createContext()

First, we need to create a context instance. This is done using the in-built createContext() function.

The context instance, newContext, is used to ‘wrap’ the child elements that will use the context value. This is done by specifying newContext.Provider when creating the opening and closing tags of the JSX:

The InnerElement Element can access both count and setCount since it’s wrapped by two context providers, one for each.

newContext.Provider has only one prop ‘value’. This value is passed down to all the inner child elements and is used by the inner elements using ‘useContext’.

Note: If the context value (for example, ‘count’) changes in the parent node, the change affects all the child elements using the context value, i.e. they will now use the updated value.

Using the context value in child elements using useContext

To use the context value we set in our parent element, we make use of the useContext hook:

// InnerElement component definition
import { useContext } from "react";
// references to the context we made in the parent element
import { newContext, newContextChange } from "./ThemeContext";

export const InnerElement = () => {
  //using context we made for 'count'
  const theCountVal = useContext(newContext);
  //using context we made for 'setCount'
  const setCount = useContext(newContextChange);

  return (
    <div>
      <button onClick={() => setCount((val) => val + 1)}>Increase Count</button>
      <p>The count val is {theCountVal}</p>
    </div>
  );
};

In the child element, InnerElement, we use useContext, to provide the ‘values’ stored by both of the context objects we defined in the parent file.

Once we have a local reference to the context value, we can use that as needed.

Resources:

• React Dev Documentation: https://react.dev/reference/react/useContext
• Web Dev Simplified YouTube: https://www.youtube.com/watch?v=5LrDIWkK_Bc&list=PLZlA0Gpn_vH8EtggFGERCwMY5u5hOjf-h&index=6&ab_channel=WebDevSimplified