Imagine una parte simple de una aplicación React que consta de OuterComponent e InnerComponent dentro de ella. Hay instrucciones que estos componentes deben seguir:
data en OuterComponent cambien su valor, debe sobrescribir el valor actual de InnerComponent 's localData .localData en InnerComponent cambia su valor, debe sobrescribir el valor actual de los data de OuterComponent .Aquí está el código en cuestión:
import React, { useEffect, useState } from "react"; const InnerComponent = ({ data = [], onChange = null }) => { const [localData, setLocalData] = useState([]); useEffect(() => { if (onChange) onChange(localData); }, [localData, onChange]); useEffect(() => { console.log("render"); setLocalData(data); }, [data]); return ( <div> {localData.map((e) => ( <div>{e}</div> ))} </div> ); }; const OuterComponent = () => { const [data, setData] = useState(["alice", "bob"]); return <InnerComponent data={data} onChange={setData} />; }; export default function App() { return ( <div className="App"> <OuterComponent /> </div> ); } Dado que esta situación es algo que puede surgir en muchos casos y, por lo tanto, es típica, ¿existen formas tradicionales de refactorizar ese código en algo libre de posibles casos de representación infinita? También tengo curiosidad por saber si hay una manera si localData es una matriz mientras que data son un objeto que tiene esta matriz en una de sus claves que debe ser monitoreada por un componente secundario.
Sí, en tales casos, mantendría una referencia de los datos locales anteriores en el componente interno y agregaría una cláusula de protección, en el efecto de uso que llama a cambio, para probar contra los datos locales actuales, por ejemplo:
const prevLocalData = useRef(localData); useEffect(() => { if (JSON.stringify(localData) === JSON.stringify(prevLocalData.current)) { return undefined; } onChange(localData); }, [localData, onChange])