Estoy tratando de entender este artículo (en su mayoría muy útil) que describe cómo usar la API de contexto de reaccionar para administrar el estado del nivel de la aplicación. Para una aplicación simple (en este caso, una aplicación de contador básica), utiliza la siguiente solución:
const CountContext = React.createContext() function CountProvider(props) { const [count, setCount] = React.useState(0) const value = React.useMemo(() => [count, setCount], [count]) return <CountContext.Provider value={value} {...props} /> }para proporcionar el contexto, y luego el siguiente enlace que se puede usar en un componente en algún lugar del árbol de componentes:
function useCount() { const context = React.useContext(CountContext) if (!context) { throw new Error(`useCount must be used within a CountProvider`) } return context } Me cuesta entender por qué se necesita el gancho useMemo aquí. No hay un cálculo especialmente pesado involucrado aquí, así que no estoy seguro de por qué estamos memorizando estos valores. ¿No funcionaría igual de bien si el proveedor de contexto tuviera el siguiente aspecto:
function CountProvider(props) { const [count, setCount] = React.useState(0) return <CountContext.Provider value={value} {...props} /> }¡Siento que probablemente hay algo que me estoy perdiendo!
Creo que llamar a setCount siempre se volverá a procesar incluso si se pasa el mismo valor a la función.
pero la línea
const value = React.useMemo(() => [count, setCount], [count])Dejará de llamar a setCount a menos que haya un valor diferente para el conteo. Reduciendo así los re-renderizados y aumentando el rendimiento.
Puede probar esta teoría colocando un registro dentro y viendo cómo se procesa el componente con y sin useMemo.
Hay una teoría muy simple de por qué debería usar useMemo para memorizar los valores devueltos al proveedor de contexto. Cuando pasa el valor al proveedor de contexto como un objeto o como una matriz como
return <CountContext.Provider value={{state, setCount}} {...props} />o
return <CountContext.Provider value={[state, setCount]} {...props} /> Lo que sucede esencialmente es que cada vez que el componente CountProvider vuelve a generar una nueva referencia al objeto o matriz se pasa como valor a CountContext.Provider y, por lo tanto, incluso si el valor real puede no haber cambiado, los consumidores de contexto se vuelven a generar desde la referencia. falla la verificación del valor
Ahora puede o no necesitar un useMemo dependiendo de la lógica que tenga en su ContextProvider . Por ejemplo, en su caso, CountContext solo usa un estado, es decir, cuenta y se lo pasa al niño y si CountContext es uno de los elementos de nivel superior que no se vuelve a representar con otra cosa que no sea el cambio de cuenta, entonces en ese caso si usa useMemo o no, no hace ninguna diferencia ya que la referencia del valor devuelto de useMemo también se actualiza en el cambio de conteo
Sin embargo, si tiene ciertos elementos primarios para CountProvider que pueden hacer que CountProvider se vuelva a procesar, useMemo para memorizar el valor del contexto resulta útil para evitar volver a procesar todos los consumidores de contexto.