¿Por qué se crea un bucle infinito cuando paso una expresión de función a la matriz de dependencia useEffect? La expresión de la función no altera el estado del componente, solo lo referencia.
// component has one prop called => sections const markup = (count) => { const stringCountCorrection = count + 1; return ( // Some markup that references the sections prop ); }; // Creates infinite loop useEffect(() => { if (sections.length) { const sectionsWithMarkup = sections.map((section, index)=> markup(index)); setSectionBlocks(blocks => [...blocks, ...sectionsWithMarkup]); } else { setSectionBlocks(blocks => []); } }, [sections, markup]);Si el marcado altera el estado, podría entender por qué crearía un bucle infinito, pero no lo hace, simplemente hace referencia a las secciones.
Para los que buscan la solución a este problema
const markup = useCallback((count) => { const stringCountCorrection = count + 1; return ( // some markup referencing the sections prop ); // useCallback dependency array }, [sections]);Así que no estoy buscando una respuesta relacionada con el código a esta pregunta. Si es posible, estoy buscando una explicación detallada de por qué sucede esto.
Estoy más interesado en el por qué que simplemente encontrar la respuesta o la forma correcta de resolver el problema.
¿Por qué pasar una función en la matriz de dependencia useEffect que se declara fuera de useEffect provoca una nueva representación cuando tanto el estado como los accesorios no se cambian en dicha función?
¿Por qué se crea un bucle infinito cuando paso una expresión de función?
El "bucle infinito" es el componente que se vuelve a renderizar una y otra vez porque la función de markup es una NUEVA referencia de función (puntero en la memoria) cada vez que el componente se renderiza y useEffect activa la nueva renderización porque es una dependencia.
La solución es, como señaló @drew-reese, usar el useCallback para definir su función de markup .
El problema es que en cada ciclo de renderizado, markup se redefine. React usa una comparación superficial de objetos para determinar si un valor se actualizó o no. Cada markup de ciclo de renderizado tiene una referencia diferente. Sin embargo, puede usar useCallback para memorizar la función para que la referencia sea estable. ¿Tiene habilitadas las reglas de gancho de reacción para su linter? Si lo hiciera, probablemente lo marcaría, le diría por qué y le haría esta sugerencia para resolver el problema de la referencia.
const markup = useCallback( (count) => { const stringCountCorrection = count + 1; return ( // Some markup that references the sections prop ); }, [count, /* and any other dependencies the react linter suggests */] ); // No infinite looping, markup reference is stable/memoized useEffect(() => { if (sections.length) { const sectionsWithMarkup = sections.map((section, index)=> markup(index)); setSectionBlocks(blocks => [...blocks, ...sectionsWithMarkup]); } else { setSectionBlocks(blocks => []); } }, [sections, markup]);