useContext() Hook in React

In this article, we'll explore the useContext() hook in detail. I'll cover what it is, how to use it, and why we use it. I'll also provide examples to help you understand how to implement it in your code.

Introduction to useContext() Hook

When building React applications, it's often necessary to pass data between components. This is where the useContext() hook comes in. The useContext() hook is a feature introduced in React 16.8 that allows us to use React's Context API in a functional component.

What is useContext() Hook?

The useContext() hook is a built-in React hook that allows components to consume data from a parent component, regardless of the depth of the component tree. This hook provides a way to avoid prop drilling, which can become complicated and tedious when dealing with deeply nested components.

The useContext() hook is similar to the useState() hook in that it allows functional components to use state without the need for class components. However, the useContext() hook is used to pass data between components, rather than managing state within a single component.

The useContext() hook is used in conjunction with the Context API, which is a feature that allows us to create a shared state that can be accessed by all components in the application.

How to use useContext() Hook?

Using the useContext() hook is straightforward. Here's a step-by-step guide:

1. Create a Context

To use the useContext() hook, you first need to create a Context. A Context is an object that holds the state you want to share between components. You can create a Context by using the createContext() method provided by React.

Here's an example:

import React from 'react';
import { createContext } from 'react';

const MyContext = React.createContext();

This creates a new Context called MyContext.

1. Set the initial state

Once you've created a Context, you need to set the initial state. You can do this by creating a state object and passing it to the useState() hook.

Here's an example:

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

const MyContext = React.createContext();

const MyContextProvider = ({ children }) => {
  const [state, setState] = useState({});

  return (
    <MyContext.Provider value={[state, setState]}>
      {children}
    </MyContext.Provider>
  );
};

In this example, we're using the useState() hook to set the initial state of the Context. We're also creating a new component called MyContextProvider , which is a wrapper component that provides access to the state and setState functions via the Context.

NOTE:- The value prop passed to the Context.Provider component gets returned when using the useContext hook.

When a value is passed to the value prop of a Context.Provider, it becomes available to any component nested inside the Context.Provider component tree that uses the useContext hook to access the context.

The useContext hook returns the value prop passed to the nearest ancestor Context.Provider component. If there is no ancestor Context.Provider component in the component tree, useContext returns the default value passed to the createContext method.

1. Provide the Context

Once you've set the initial state, you need to provide the Context to the components that need access to the state. You can do this by wrapping the components in the Context Provider.

Here's an example:

import React from 'react';
import MyContextProvider from './MyContextProvider';
import ComponentThatNeedsContext from './ComponentThatNeedsContext';

const App = () => {
  return (
    <MyContextProvider>
      <ComponentThatNeedsContext />
    </MyContextProvider>
  );
};

export default App;

In this example, we're wrapping the ComponentThatNeedsContext component with the MyContextProvider component.

1. Consume the Context

Finally, you need to consume the Context in the components that need access to the state. You can do this by using the useContext() hook.

Here's an example:

import React, { useContext } from 'react';
import MyContext from './MyContext';

const ComponentThatNeedsContext = () => {
  const [state, setState] = useContext(MyContext);

  return (
    <div>
      <p>{state}</p>
    </div>
  );
};

export default ComponentThatNeedsContext;

In this example, we're using the useContext() hook to access the state and setState functions provided by the MyContext object.

Why do we use useContext() Hook?

The useContext() hook is useful for several reasons. Here are some of the benefits:

1. Avoid prop drilling

One of the most significant benefits of using the useContext() hook is that it allows us to avoid prop drilling. Prop drilling is the process of passing down props through multiple levels of components to get to the component that needs the data. This can be tedious and error-prone, especially if you have a large component tree.

By using the useContext() hook, we can provide access to the state and functions without the need to pass down props manually. This makes our code cleaner and easier to maintain.

1. Share state between components

The useContext() hook allows us to share state between components easily. By creating a Context and providing it to the components that need access to the state, we can ensure that all the components are using the same state.

This is especially useful when dealing with global data, such as user authentication or theme settings. By using the useContext() hook, we can ensure that all components are using the same data, and any updates to the data will be reflected in all components.

1. Cleaner code

The useContext() hook can also lead to cleaner code. By avoiding prop drilling and sharing state between components, we can reduce the amount of code needed to pass data between components. This can make our code more readable and easier to understand.

Conclusion

In summary, the useContext() hook is a powerful feature in React that allows us to share state between components and avoid prop drilling. By creating a Context and providing it to the components that need access to the state, we can ensure that all components are using the same data.

To use the useContext() hook, you need to create a Context, set the initial state, provide the Context, and consume the Context using the useContext() hook. By using the useContext() hook, you can write cleaner, more maintainable code and make your React applications more efficient.