Callback в ref

Здарова, работяги!

Думаю, для вас не секрет, что в React доступ к DOM-элементу можно получить не только с помощью document.getElementById(и подобного), но и используя useRef. Но есть еще один способ, и в некоторых случаях он даже лучше.

Допустим, мы хотим установить фокус на DOM-элемент. Часто я вижу подобное решение:

function MyComponent() {
    const inputRef = useRef(null);

    useEffect(() => {
        inputRef.current?.focus();
    }, []);

    return (
        <div>
            {/* разные элементы */}
            <input ref={inputRef} />
            {/* разные элементы */}
        </div>
    );
}

По моему мнению, оно не самое эффективное, особенно учитывая двойные вызовы колбека useEffect в React.StrictMode(dev mode). Чтобы воспользоваться альтернативным решением, необходимо посмотреть на апи ref’а. Там мы увидим, что ref ожидает следующие значения:

RefCallback<T> | RefObject<T>

Делаем вывод, что [[ref]] принимает еще и ссылку на функцию. Собираем пример:

function MyComponent() {
    const onRender = useCallback((element) => {
        element?.focus();
    }, []);

    return (
        <div>
            {/* разные элементы */}
            <input ref={onRender} />
            {/* разные элементы */}
        </div>
    );
}

onRender будет вызываться при добавлении (и при удалении, если этот элемент рисуется условно).

Такой подход также решает проблему, когда вам нужно получить доступ к элементу, который условно рисуется в дочернем элементе. В этом случае использование ref с useEffect будет неэффективно.