How to change the value of a Context with useContext?

When working with React’s Context API, you might come across a situation where you need to change the value of a context dynamically. Fortunately, with the useContext hook, it’s easy to achieve this. In this article, we’ll explore different approaches to change the value of a context using useContext.

Approach 1: Using useState and useEffect

The first approach involves using the useState and useEffect hooks to manage the context value. Here’s an example:


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

const MyContext = React.createContext();

const MyProvider = ({ children }) => {
  const [value, setValue] = useState('initial value');

  useEffect(() => {
    // Change the value after 3 seconds
    const timer = setTimeout(() => {
      setValue('new value');
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  return (
    
      {children}
    
  );
};

const MyComponent = () => {
  const value = useContext(MyContext);

  return (
    
      Context value: {value}
    
  );
};

// Usage
const App = () => {
  return (
    
      
    
  );
};

In this example, we create a context using createContext and a provider component called MyProvider. Inside MyProvider, we use useState to manage the context value and useEffect to change the value after 3 seconds. The value is then passed to the MyContext.Provider component.

In MyComponent, we use the useContext hook to access the context value and display it.

Approach 2: Using a separate function to update the context value

If you prefer a more modular approach, you can create a separate function to update the context value. Here’s an example:


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

const MyContext = React.createContext();

const MyProvider = ({ children }) => {
  const [value, setValue] = useState('initial value');

  const updateValue = (newValue) => {
    setValue(newValue);
  };

  return (
    
      {children}
    
  );
};

const MyComponent = () => {
  const { value, updateValue } = useContext(MyContext);

  const handleClick = () => {
    updateValue('new value');
  };

  return (
    
      Context value: {value}
      
    
  );
};

// Usage
const App = () => {
  return (
    
      
    
  );
};

In this example, we create a separate function called updateValue inside the MyProvider component to update the context value. We pass this function along with the value in the MyContext.Provider component.

In MyComponent, we use the useContext hook to access both the value and the updateValue function. We can then call the updateValue function to change the context value.

Conclusion

Changing the value of a context with useContext is straightforward. You can either use useState and useEffect to manage the value or create a separate function to update the value. Choose the approach that best suits your needs and enjoy the flexibility of React’s Context API.

How to change the value of a Context with useContext?