Estoy tratando de frenar el efecto de uso relacionado con los componentes anidados. Aquí están los componentes:
Padre (recibe datos de la API) :

 const ListOfLots = (props) => { const initial = {listLots: props.lots, form: props.form} const [lots, setLots] = useState(initial); useEffect(() => { setLots({ listLots: props.lots, form: props.form }); }); return ( <div> { lots.listLots.map(function(lot) { return <Lot key={lot.uuid} lot={lot} procForm={lots.form}/> }) } </div> ) }

Anidado:

 const Lot = (props) => { const initial = {currLot: props.lot, form: props.form}; const [lot, setLot] = useState(initial); let getWinningBid = (offers) => { for (let i = 0; i < offers.length; i++) { console.log("BOOM!!!"); if (offers[i].isTrue === true) { return offers[i].pip; } } } return ( ... ) }

Si bien no uso dependencias en useEffect de los padres, tengo una invocación infinita de console.log("BOOM!!!") , que es, por supuesto, inaceptable, pero mi componente anidado se volvió a procesar. Cuando trato de usar el siguiente tipo de dependencias en useEffect : [] , [lots.form] , [lots.listLots] o [lots.listLots.length] mi componente anidado no se vuelve a representar: permanece en blanco. Entonces, el resultado es el siguiente: tengo un bucle useEffect infinito o useEffect que no funciona (?).
¿Hay alguna forma en este caso de manejar el useEffect ?