Сегодня узнала, что можно в ref передавать callback

21 нояб. 2024 г.

От моего внимания как-то ускользнуло, что в React можно передавать функцию-callback как ref для элемента, а не только объект, созданный с помощью useRef.

const scroller = (node: HTMLDivElement) => {
    if (!node) return;
    node.scrollIntoView({ behavior: "smooth" });
};

// somewhere in component
 <div ref={scroller} />

Как это работает:

Когда элемент добавляется в DOM, React вызывает функцию-callback и передает в неё DOM-узел как аргумент.
Когда элемент удаляется из DOM, React вызывает эту функцию с аргументом null.
Callback также вызывается каждый раз, когда передается новая функция (например, при каждом рендере, если она определена как обычная функция).