How to Update Context Value in React: Simple Guide

To update a context value in React, define a state in the context provider and pass both the state and its updater function via the context value. Then, use useContext in child components to access and call the updater to change the context value.

Syntax

To update context values, you create a context provider component that holds state with useState. You pass both the current value and the updater function in the value prop of Context.Provider. Child components use useContext to access and update the value.

• const [state, setState] = useState(initialValue): Holds the context value and updater.
• <Context.Provider value={{ value: state, setValue: setState }}>: Shares state and updater.
• const context = useContext(Context): Accesses state and updater in children.

javascript

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

const MyContext = createContext();

function MyProvider({ children }) {
  const [value, setValue] = useState('initial');
  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
}

function Child() {
  const { value, setValue } = useContext(MyContext);
  // Use setValue to update context
}

Example

This example shows a context provider with a string value and a button in a child component that updates the context value when clicked.

javascript

import React, { createContext, useState, useContext } from 'react';
import { createRoot } from 'react-dom/client';

const MyContext = createContext();

function MyProvider({ children }) {
  const [value, setValue] = useState('Hello');
  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
}

function Child() {
  const { value, setValue } = useContext(MyContext);
  return (
    <div>
      <p>Context Value: {value}</p>
      <button onClick={() => setValue('Updated!')}>Update Context</button>
    </div>
  );
}

function App() {
  return (
    <MyProvider>
      <Child />
    </MyProvider>
  );
}

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

Output

Context Value: Hello
[Button labeled 'Update Context']

When the button is clicked, the text changes to:
Context Value: Updated!

Common Pitfalls

Not passing the updater function: If you only pass the value without the setter, child components cannot update the context.

Updating context directly: Never mutate the context value directly; always use the updater function from useState.

Forgetting to wrap components: Components using useContext must be inside the provider; otherwise, they get undefined or default values.

javascript

/* Wrong: Only passing value, no updater */
<MyContext.Provider value={value}>
  {children}
</MyContext.Provider>

/* Right: Pass both value and updater */
<MyContext.Provider value={{ value, setValue }}>
  {children}
</MyContext.Provider>

Quick Reference

• Define state in provider with useState.
• Pass both value and updater in value prop.
• Use useContext in children to read and update.
• Never mutate context value directly.
• Wrap all consumers inside the provider.

Key Takeaways

Always pass both the context value and its updater function from the provider.

Use the updater function from useState to change context values safely.

Wrap components that consume context inside the provider component.

Never mutate context values directly; always update via the setter function.

Use useContext hook to access and update context in child components.