How to work with useContext Hook in React

React hooks are very useful functions provided in React functional component and one of them is useContext hook. We have also covered other hooks like useEffect, useState.

What is useContext Hook

If you have heard of redux where developers will use it together with react to store application data, useContext have a similar concept to it. This useContext hook will wrap a set of components where they will be able to access this same store variable or value.

To share state, one of the solutions is to pass the state and callback function to all child components but the code will become very messy and hard to debug. useContext hook provides a cleaner looking way of implementing this sharing of state and function concept.

Official useContext documentation.

Using useContext Hook

To have an example, let say we want to have a single fruitCount variable over the whole application. We also want all child component to be able to access it and update it easily.

First, we use ‘createContext’ to define a context. Then we define a wrapper component (known as Provider) over the child components (known as Consumer). In these consumer component, we will be able to access the context with useContext.

When defining the child component, we then have ‘useContext’ to take in the context and destructure the values.

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

const FruitCountContext = createContext();

const App = () => {
  const [fruitCount, setFruitCount] = useState(100);
  
  return (
    <FruitCountContext.Provider value={{ fruitCount, setFruitCount }}>
      <FruitCountDisplay />
      <FruitCountAddButton />
    </FruitCountContext.Provider>
  );
};

// FruitCountDisplay is just a component that display the values. Hence, it only needs to destructure the state and not the function
const FruitCountDisplay = () => {
  const { fruitCount } = useContext(FruitCountContext);
  return (
    <div>{fruitCount}<div>
  );
};

// FruitCountAddButton need to provide the action to update fruitCount. Hence, it only extract out the update function to update the state on click.
const FruitCountAddButton = () => {
  const { setFruitCount } = useContext(FruitCountContext);
  return (
    <button onClick={() => setFruitCount(count => count + 1)}>
  );
};

One of the trick you can see from above is that the state and function are both put into an object. This allows the child component to retrieve what they want to access and ignore the rest of the state/function.

Conclusion

Looking at the example above, accessing a state hosted at the parent component is now so much easier with useContext Hook.

This useContext hook is usually good for sharing small amount of states. When there is a much larger scale of states to share in the application, redux framework can be a good choice. Redux works in such a way that it provide a common store to store states together.