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.