React's useContext Hook

Sharing data between components is a common thing in React applications, and it can quickly become complex as the application grows. When components are nested deep in the component tree, passing data down through props becomes tedious, and managing the state can be challenging. In some applications, there may be similar data that needs to be shared with almost all the components. Instead of prop drilling our way down the component, React has a great solution the useContext Hook.

The useContext hook is a part of the Context API in React, which provides a way to share data between components without having to pass props through the entire component tree. Instead, the data is made available to all components that subscribe to the context. We will walk through how to setup and use the useContext Hook in this blog.

What is useContext Hook?

According to the react docs, "useContext is a React Hook that lets you read and subscribe to context from your component".
but what does that mean? In this context "reading" and "subscribing" refer to accessing and listening to changes in a specific context object.

"Reading" from a context means retrieving the current value of the context object. When a component uses useContext, it "subscribes" to updates to that context object. This means that any time the value of the context object changes, the component will re-render with the updated value.

This is different from passing props down through the component tree, as useContext allows you to access a value directly from a context object without having to pass it down through intermediary components. This can be particularly useful for values that are needed by many components in the application.

How To useContext

First, let's define the context object. The context object is a container for data that needs to be shared across components. You can create a context object using the createContext() function from React. To use this function we must first import it from React and set the context up by defining a variable. This is done in the example below:

import { createContext } from 'react';

const myContext = createContext();

The createContext() function creates a new context object, which is then used to pass data between components. The context object is a container for data that needs to be shared across components.

Next, we need to provide the data to the context object. We can use the Context.Provider component to provide the data to the context. The Provider component wraps the component tree that needs access to the data. In the example below, we provide the user data to the context using the value prop of the Provider component:

import { createContext } from 'react';
const UserContext = createContext();

function App() {
  const user = {
    firstName: 'John',
    lastName: 'Doe',
    email: '[e-mail]',
  };

  return (
    <UserContext.Provider value={user}>
      <Header />
      <Main />
      <Footer />
    </UserContext.Provider>
  );
}

In this example, we provide the user data to the UserContext using the value prop of the UserContext.Provider component. The Header, Main, and Footer components are wrapped in the UserContext.Provider component and have access to the user data.

Now that we have provided the data to the context, we can use the data in the child components. We use the useContext hook to grab the data from the context.

The useContext hook is a function that takes the context object as an argument and returns the data stored in the context. Here's an example of how we can use the useContext hook in a child component:

import { useContext } from 'react';
import UserContext from './UserContext';

function Header() {
  const user = useContext(UserContext);

  return (
    <header>
      <h1>{user.firstName} {user.lastName}</h1>
      <p>Email: {user.email}</p>
    </header>
  );
}

In this example, we use the useContext hook to consume the user data from the UserContext. The user data is stored in the user variable and can be used in the component.

We can use the useContext hook in any child component that needs access to the shared data. This makes it easy to share data across components and makes our code more manageable.

Advantages of Using useContext Hook

One of the main advantages of using the useContext hook is that it simplifies the process of passing data through props. When a component needs access to the data, it can simply use the useContext hook to consume the data from the context object, instead of having to pass the data down through props.

Another advantage of using the useContext hook is that it makes our code more maintainable. When the application grows, managing the state can become challenging. By using the useContext hook to share data between components, we can use multiple contexts
In many cases, an application may require multiple contexts to store and share data across different components. Fortunately, the useContext hook can be used with multiple contexts in the same component.

To use multiple contexts, we can simply call useContext on each context object that we want to use in the component. For example:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');
const LanguageContext = React.createContext('en');

function Header() {
  const theme = useContext(ThemeContext);
  const language = useContext(LanguageContext);

  return (
    <header>
      <h1>My App</h1>
      <p>Theme: {theme}</p>
      <p>Language: {language}</p>
    </header>
  );
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <LanguageContext.Provider value="fr">
        <Header />
      </LanguageContext.Provider>
    </ThemeContext.Provider>
  );
}

In this example, we create two context objects for the theme and language, and then we call useContext on both objects in the Header component. We then provide values for both contexts in the App component using the Provider component.

Best Practices

When using the useContext hook, there are some best practices to keep in mind to ensure clean and maintainable code:

Use context only when necessary: Context should be used sparingly and only when it is necessary to share data across multiple components. Overusing context can make the code difficult to understand and maintain.

Keep context small: The data stored in context should be kept as small as possible to ensure optimal performance. Storing large amounts of data in context can slow down the rendering of components.

Provide default values: When creating a context, it is good practice to provide a default value for the context. This ensures that the components that use the context have a value to work with, even if the provider does not provide a value.

Use context as high as possible: When using context, it is best to provide the context at the highest possible level in the component tree. This ensures that all components that need the context have access to it, without having to pass the context down through multiple levels of components.

Conclusion

In conclusion, the useContext hook is a powerful tool for sharing data between components in React applications. It simplifies the process of passing data through props and makes the code more maintainable. By creating a context object and using the useContext hook, we can provide data to all the child components that subscribe to the context. This makes it easy to share data across components and manage the state of the application. By following best practices when using context, we can ensure clean and maintainable code.