Passing multiple value and setter pairs to Context.Provider in React

Context.Provider accepts any value, so you can try passing an object:

<MyContext.Provider
  value={{ value: [value, setValue], value2: [value2, setValue2] }}
>
  {props.children}
</MyContext.Provider>;

const App = () => {
  return (
    <MyProvider>
      <ComponentA />
    </MyProvider>
  );
};

const MyContext = React.createContext();

const MyProvider = props => {
  const [value, setValue] = React.useState("foo");
  const [value2, setValue2] = React.useState("goo");

  return (
    <MyContext.Provider
      value={{ value: [value, setValue], value2: [value2, setValue2] }}
    >
      {props.children}
    </MyContext.Provider>
  );
};

const ComponentA = () => {
  const { value, value2 } = React.useContext(MyContext);
  const [stateValue, setStateValue] = value;
  const [stateValue2, setStateValue2] = value2;

  return (
    <div>
      <h1>The value is: {stateValue}</h1>
      <h1>The value2 is: {stateValue2}</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("app"));

---

Notice that there is a caveat when trying to optimize useless renders (be sure you not just optimizing prematurely): there is no render bailout for Context Consumers.

As for v17, may be change in near future.

To pass in multiple state values to a provider, you just need to create another state object and pass it in.

But inlining these comes with a caveat mentioned in the docs. Since the object (and arrays) in render are created every render, they lose the referential equality and hance any components connected to this context will need to refresh.

To get around this in a functional component, you can use useMemo to memoise the value and refresh only when one of these values change.

const MyContext = React.createContext();
const MyProvider = (props) => {
    const [valueA, setValueA] = React.useState("foo");
    const [valueB, setValueB] = React.useState("bar");
    const providerValue = React.useMemo(() => ({
        valueA, setValueA,
        valueB, setValueB,
    }), [valueA, valueB]);
    return(
        <MyContext.Provider value={providerValue}>
            {props.children}
        </MyContext.Provider>
    );
}