Pasando múltiples pares de valores y establecedores a Context.Provider en React

Solución:

Context.Provider acepta cualquier valor, por lo que puede intentar pasar un objeto:

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

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

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"));

Para pasar varios valores de estado a un proveedor, solo necesita crear otro objeto de estado y pasarlo.

Pero incluirlos viene con una advertencia mencionada en los documentos. Dado que el objeto (y las matrices) en el render se crean en cada render, pierden la igualdad de referencia y, por lo tanto, cualquier componente conectado a este contexto deberá actualizarse.

Para solucionar esto en un componente funcional, puede utilizar useMemo para memorizar el valor y actualizar solo cuando cambie uno de estos valores.

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>
    );
}

---

---

Utiliza Nuestro Buscador