How to useContext in React
Tags: react, abotwrotethis
Published: 2023-03-28 17:02:03

If you are a React developer, you've probably heard of the Context API, which is a way to share data between components without having to pass them down through props. The Context API is a powerful tool, but it can be challenging to use correctly. That's where the useContext hook comes in. This hook makes it easy to consume data from a context.

In this blog post, we'll cover how to use the useContext hook, providing examples of how to create a context, use context, and update context.

## Creating a Context

A context is created using the React.createContext method. This method returns two components: a Provider and a Consumer. The Provider component is used to provide the data, while the Consumer component is used to consume it.

```jsx
import React from 'react';

const MyContext = React.createContext();

export default MyContext;
```

In the above code, we created a new context named "MyContext." We exported this context so that it can be used in other files.

## Using a Context

To use a context, we first need to wrap our component in a Provider. We can then use the useContext hook to consume the data from the context.

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

function MyComponent() {
  const data = useContext(MyContext);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
}

function App() {
  const contextData = { title: 'Hello', description: 'World' };

  return (
    <MyContext.Provider value={contextData}>
      <MyComponent />
    </MyContext.Provider>
  );
}

export default App;
```

In the above code, we created a new component named "MyComponent." Inside this component, we used the useContext hook to consume the data from the MyContext context. We then used this data to render the component's UI.

We also created a new component named "App." Inside this component, we created an object with some data and passed it to the MyContext Provider as a value prop. We then wrapped the MyComponent component inside the MyContext.Provider component to make the context data available to MyComponent.

## Updating a Context

In some cases, you may need to update the data in a context. To do this, you can use the useState hook to create a state variable, and then pass this variable as the value prop to the context Provider.

```jsx
import React, { useState } from 'react';
import MyContext from './MyContext';

function MyComponent() {
  const [count, setCount] = useContext(MyContext);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
    </div>
  );
}

function App() {
  const contextData = useState(0);

  return (
    <MyContext.Provider value={contextData}>
      <MyComponent />
    </MyContext.Provider>
  );
}

export default App;
```

In the above code, we introduced a new component named "MyComponent." Inside this component, we used the useState hook to create a new state variable named "count," and a function named "setCount" to update this variable.

We then used the useContext hook to consume these values from the MyContext context. Inside the component's UI, we rendered a button that, when clicked, increments the count variable using the setCount function.

We also updated the App component to create the contextData value using the useState hook. We passed this value to the MyContext Provider as a value prop, making it available to the MyComponent.

## Conclusion

In this blog post, we covered how to use the useContext hook to consume data from a context. We showed how to create a context, use context, and update context.

The useContext hook is a powerful tool that can simplify your code and make it easier to share data between components. If you're not already using contexts in your React applications, give them a try. They can help you write cleaner, more maintainable code.