Reaccionar useContext con "setState"

Question

Recientemente comencé a usar Context React Api con useContext Hook. He observado que cuando tenemos una variable de estado, es decir, const someState = useState(state, setState), algunos desarrolladores pasan setSate directamente en los valores del proveedor y luego lo llaman en los componentes secundarios. ¿Es esa una buena práctica?

Cuando no usa el contexto, debe crear un controlador para "acceder" a setState en un componente secundario. Todavía estoy usando funciones de controlador y las paso a los valores del proveedor, para importarlas desde el contexto en los niños.

¿Es una buena práctica pasar setState en contexto? Todavía tengo algunas dudas ya que normalmente no puedes pasar setState directamente a un componente. ¿Hay alguna diferencia en el rendimiento o algún otro inconveniente que deba considerar?

Gracias.

Answer 1

Si entendí correctamente, la diferencia es que, de una manera, el estado se establece desde el componente principal y, en el otro, el estado se establece desde el componente secundario. A veces, la gente lo hace de esa manera para evitar la representación en bucle al cambiar el estado. No debería haber inconvenientes, pero el uso de funciones de controlador es la forma habitual de hacerlo.

Answer 2

Editar: De hecho, creo que te entendí mal, pero no estoy seguro. Mi respuesta es válida para el caso si escribe su propio proveedor que tiene un estado. Si solo usa un proveedor predeterminado que proporciona un setter, estaría de acuerdo con la respuesta de Amel.

---

Yo personalmente no lo haría, pero eso es más una opinión. Sin embargo, como siempre, depende bastante del objetivo que quieras alcanzar.

Un aspecto positivo de hacerlo es que los setters de estado proporcionados por useState siempre son los mismos para cada renderizado. Si pasa un valor personalizado, debe evitar que cambie con demasiada frecuencia porque todos los componentes que escuchan el cambio usando useContext se volverían a representar.

Todavía preferiría pasar un objeto personalizado (por ejemplo, proveniente de un useMemo para evitar representaciones innecesarias) con una devolución de llamada para establecer el estado. Es más fácil ampliar si desea proporcionar más cosas en el futuro.

Algo como esto (ejemplo muy simplista, que por supuesto no tiene sentido así, es solo para comprensión):

function MyProvider({children}) {
   const [state, setState] = useState(0);
   const provided = useMemo(() => ({
       value: state,
       setValue: (value) => setState(value)
   }, [value]);
   return <MyContext.Provider value={provided}>{children}</MyContext.Provider>;
}

Sería más fácil extender sin cambiar el código en todas partes donde se usa el contexto. Sin embargo, sigo pensando que no hay nada particularmente malo en pasar solo al colocador, si eso es lo que quieres lograr.