Как мне динамически поддерживать объект состояния с идентификаторами дочерних компонентов и ссылками?

Question

Я работаю над приложением, в котором родительский компонент должен получить доступ к своим дочерним узлам DOM, чтобы измерить их размер и положение (чтобы обнаружить столкновение во время операции «перетаскивание-выбор»).

После В некоторых исследованиях я придумал следующий способ выполнения этого:

• Удерживать объект childrenRefs в состоянии родительского компонента, где ключ является дочерним идентификатором, а значение - соответствующим дочерним ref

• Передайте объект childrenRefs и функцию setChildrenRefs каждому дочернему компоненту - используйте шаблон callback refs , чтобы задать объект childrenRefs, содержащий каждый дочерний идентификатор и Ref

Вот упрощенный код, иллюстрирующий этот подход:

// Parent
const Parent = () => {
    const [childrenRefs, setChildrenRefs] = useState({});

    // ... rest of render logic

    const children = useSelector(childrenSelector);

    const childrenComponents = children.map(child => {
        return (
            <Child
                id={child.id}
                key={child.id}
                childrenRefs={childrenRefs}
                setChildrenRefs={setChildrenRefs}
            >
            </Child>
        )
    });

    return (
         <div className="parent">
             {childrenComponents}
         </div>
    )
   
}

// Child
const Child = (id, childrenRefs, setChildrenRefs) => {

    // ... render logic

    return (
        <div
            className="child"
            ref={el => setChildrenRefs({
                ...childrenRefs,
                [id]: el,
            })}
        >
        </div>
    )
}

Я думаю, что этот подход имеет смысл, но у меня есть два вопроса:

1. Будет ли состояние, переданное каждому дочернему элементу, будет устаревшим?

   то есть при первоначальном рендеринге объект childrenRefs будет иметь значение {} - будет ли ссылка обратного вызова каждого дочернего элемента устанавливать состояние в {[id]: ref}, потому что каждый дочерний элемент получает ves childrenRefs как {}? (Я желаю, чтобы пары ключ / значение накапливались, например, {[id1]: ref1, [id2]: ref2, ..., [idN]: refN})?

2. Нужно ли мне беспокоиться об удалении пар ключ / значение для дочерних компонентов, которые удаляются?