Dado el siguiente ejemplo:

 import React, { useState, useEffect, useRef } from "react"; import id from "uniqid"; const Child = ({ updateRef, editorKey }) => { const ref = useRef(); useEffect(() => { if (ref.current && editorKey) { updateRef(editorKey, ref.current); } }, [ref.current]); return <span ref={ref}>child</span>; }; const Parent = () => { const [resolutions, setResolutions] = useState([{ key: id(), ref: null }]); const updateRef = (key, ref) => { const resolutionsCopy = [...resolutions]; const index = resolutionsCopy.findIndex((value) => value.key === key); resolutionsCopy[index].ref = ref; setResolutions(resolutionsCopy); }; console.log(resolutions); return resolutions.map((res, idx) => { return <Child key={res.key} editorKey={res.key} updateRef={updateRef} />; }); }; export default Parent;

¿Hay una mejor manera de enviar de manera efectiva las referencias de los niños a los padres (1 fuente de verdad) mientras se minimiza la cantidad de re-renderizaciones? El estado de resolución puede tener más variables que manejen cómo se representan los niños, pero la actualización en ref no debería volver a representar a los niños, sino solo actualizar los estados de referencia null a la referencia real.

Estuve tratando de memorizarlo, pero siempre resulta en infinitas re-renderizaciones. El consejo sería útil.