Как избежать useEffect с помощью ref колбеков
Реф – это обертка, в которой может храниться любое значение, но чаще всего в ней хранят DOM узлы. В каждом HTML элементе есть зарезервированный проп ref, который позволяет получить доступ к DOM узлу после рендера компонента.
const ref = React.useRef(null)
return <input ref={ref} defaultValue="Hello world" />
Одна из типичных задач при работе с рефом – сделать фокус у инпута при инициализации компонента. Один из вариантов, как это можно сделать, через useEffect:
const ref = React.useRef(null)
React.useEffect(() => {
ref.current?.focus()
}, [])
return <input ref={ref} defaultValue="Hello world" />
В целом, это способ рабочий. Однако в более сложных ситуациях, когда реф будет передаваться во вложенный компонент, то может возникнуть ситуация, когда элемент с рефом будет рендерится лишь при определенном условии. Тогда useEffect вызовется с несуществующим рефом.
Более оптимальный способ обращения к рефу – через колбек реф. Концептуально реф у React элемента – это функция, которая вызывается после того, как компонент был отрендерен. Поэтому можно передать колбек в реф и получить доступ к DOM узлу только после рендера элемента.
const ref = React.useCallback((node) => {
node?.focus()
}, [])
return <input ref={ref} defaultValue="Hello world" />
Если компонент размонтируется, то колбек будет вызван еще раз с аргументом равным null, поэтому стоит проверять переданный аргумент перед использованием.
tkdodo.eu/blog/av…ack-refs
