Tengo una función que se está utilizando en mi useEffect y tuve que agregarla en la dependency array . También tengo algunas otras dependencias que se pasan como accesorios de un componente externo. Debido a esa función de dependencia, tuve que envolver mi función en un useCallback para evitar cambios en cada renderizado. Pero estoy confundido por qué el error sigue apareciendo. Y también, ¿cómo debo cruzarlo?
import _ from "lodash"; import React, { useCallback, useEffect, useState } from "react"; function App({uniqueCol,data,handleSelect, unselectAll = false}) { const [selected, setSelected] = useState(new Set("")); const [currentRows, setCurrentRows] = useState(data); //here it is fine when I add currentRows and uniqueCol as dependencies const changeSelect = useCallback( (id: string, status: boolean) => { const cr = currentRows.map((row) => { if (uniqueCol) { // @ts-ignore if (row[uniqueCol] == id) row.selected = status; } return row; }); setCurrentRows(cr); }, [currentRows, uniqueCol] ); useEffect(() => { selected.forEach((sel) => changeSelect(sel, true)); setCurrentRows(data); }, [changeSelect, data, selected]); /*here it causes errors when I add changeSelect, currentRows, handleSelect as dependencies but works fine when I remove them*/ const unSelectAll = useCallback(() => { setSelected(new Set("")); _.map(currentRows, "id").forEach((val) => { changeSelect(val, false); }); if (handleSelect) handleSelect([]); }, [changeSelect, currentRows, handleSelect]); //another useEffect that is using the function unSelectAll as a dependency useEffect(() => { unSelectAll(); }, [unSelectAll, unselectAll]); return <h1>Anything here</h1>; }El error que estoy recibiendo es:
react-dom.development.js:67 Advertencia: se superó la profundidad máxima de actualización. Esto puede suceder cuando un componente llama a setState dentro de useEffect, pero useEffect no tiene una matriz de dependencias o una de las dependencias cambia en cada procesamiento.
El código que ha publicado no incluye "la historia completa", pero creo que es razonable suponer lo siguiente, porque dijo "Tuve que envolver mi función en un useCallback para evitar cambios en cada renderizado" , pero su uso de useCallback() prácticamente no tiene efecto aquí:
changeSelect cambiará en cada renderizado, porque:
changeSelect tiene currentRows en las dependencias, ychangeSelect llama a setCurrentRows() unSelectAll cambiará en cada renderizado, porque:
unSelectAll tiene changeSelect en las dependencias, ychangeSelect cambios en cada renderizadoEntonces, una versión simplificada para ilustrar las dependencias "recursivas" sería:
function App(){ const [currentRows, setCurrentRows] = useState(data); const changeSelect = useCallback( () => { setCurrentRows([]); }, [ currentRows, uniqueCol ] ); const unSelectAll = useCallback( () => { changeSelect(); }, [ changeSelect, currentRows ] ); return <>...</>; } Esto es solo una suposición, pero probablemente algún otro código, probablemente el useEffect que mencionó, pero no ha publicado el código, está usando unSelectAll como una dependencia, y los cambios pueden uniqueCol , de modo que
App se vuelve a renderizar si uniqueCol cambiachangeSelect cambios en cada renderizadounSelectAll cambia porque changeSelect cambiauniqueCol cambia porque unSelectAll cambia (¿probablemente? ¿En algún otro código?)Al menos probablemente esta sea la causa raíz, y la cadena recursiva real (el bucle infinito) se cierra en otro lugar, por esta razón o por una similar.