Как избежать useEffect с помощью ref колбеков Реф – это оберт | Заметки про React

Как избежать useEffect с помощью ref колбеков

Реф – это обертка, в которой может храниться любое значение, но чаще всего в ней хранят DOM узлы. В каждом HTML элементе есть зарезервированный проп ref, который позволяет получить доступ к DOM узлу после рендера компонента.

const ref = React.useRef(null)

return


Одна из типичных задач при работе с рефом – сделать фокус у инпута при инициализации компонента. Один из вариантов, как это можно сделать, через useEffect:

const ref = React.useRef(null)

React.useEffect(() => {
ref.current?.focus()
}, [])

return


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

Более оптимальный способ обращения к рефу – через колбек реф. Концептуально реф у React элемента – это функция, которая вызывается после того, как компонент был отрендерен. Поэтому можно передать колбек в реф и получить доступ к DOM узлу только после рендера элемента.

const ref = React.useCallback((node) => {
node?.focus()
}, [])

return


Если компонент размонтируется, то колбек будет вызван еще раз с аргументом равным null, поэтому стоит проверять переданный аргумент перед использованием.

https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs