Tengo este siguiente código Parent y DataFilter .
Padre.js
const Parent = () => { const [filteredData, setFilteredData] = useState() ... const Filter = () => { return ( <div> <h2>Filter your data</h2> <DataFilter data={filteredData} updateFilter={setFilteredData} /> <Result data={filteredData} /> </div> ) } return ( <div> <h1>Header</h1> <Filter /> </div> ) }Filtro de datos.js
const DataFilter = ({ data, updateFilter }) => { const [name, setName] = useState(defaultFilters.name) const [age, setAge] = useState(defaultFilters.age) ...(filter logic using data) useEffect(() => { updateFilter({ name, age }) }, [name, age]) } Aquí, recibo Maximum update depth exceeded , también conocida como representación infinita, y sé por qué.
Parent y DataFilter se procesanDataFilter activa useEffect de Parent en setFilteredDataParent se vuelve a representar debido a setFilteredDataParent elemento principal que se vuelve a renderizar activa el componente secundario DataFilter Pero esto solo comenzó a suceder solo después de que extraje Filter en 'Parent' como un componente interno... Sé que es extraño, pero funcionaba bien cuando Parent estaba así
const Parent = () => { const [filteredData, setFilteredData] = useState() ... return ( <div> <h1>Header</h1> <div> <h2>Filter your data</h2> <DataFilter data={filteredData} updateFilter={setFilteredData} /> <Result data={filteredData} /> </div> </div> ) }¿Alguien sabe por qué la representación infinita ocurre solo cuando es un componente interno?
Intenté usar useCallback para setFilteredData pero no funcionó.
Además, ¿qué debo hacer para evitar el procesamiento infinito si quiero mantenerlo como un componente en lugar de escribir todo directamente en un retorno ()?
Tu razonamiento es correcto por lo que puedo deducir.
Para reformular:
Los componentes secundarios activan el setFilteredData del componente principal.
Cuando el estado cambia en el componente principal, el principal volverá a representar a sus hijos, lo que hará que <DataFilter> (junto con otros elementos secundarios) se vuelva a representar, lo que hace que useEffect se ejecute nuevamente ya que useEffect se ejecuta en cada representación.
Este proceso se repite, lo que hace que el estado del padre se actualice y se vuelva a representar. Y esto continúa en un bucle infinito.
Creo que la razón por la que funcionó con su estructura anterior se debió al anidamiento de los componentes, con los cambios de los padres solo actualizando los niños relevantes (a diferencia de la cadena más larga de anidamiento como su configuración actual).
Si desea que no se vuelva a renderizar siempre, mantendría la lógica relevante en el niño para que el niño sea responsable solo de su propio estado y se vuelva a renderizar, en lugar de que los cambios en el estado principal hagan que el niño se vuelva a renderizar. .
Alternativamente, buscaría envolver al niño en React.memo HOC, lo que limitará las re-renderizaciones dependiendo de los accesorios.