Почему ref.current доступен внутри useEffect уже при первом рендере и как устроен жизненный цикл ref?

В React ref — это обычный объект вида { current: value }, который создаётся хуком useRef один раз за весь жизненный цикл компонента. React не пересоздаёт этот объект при повторных рендерах, поэтому ссылка на него остаётся стабильной. Меняется только поле current, которое React обновляет в нужный момент.

Фазы жизненного цикла

Рендер компонента проходит несколько этапов:

• Render phase — React вызывает функцию компонента, вычисляет JSX. Здесь ref.current ещё не привязан к DOM.
• Commit phase — React применяет изменения к DOM и присваивает ref.current реальный DOM-узел (или значение, возвращённое callback-ref).
• Effects phase — после commit выполняются useEffect и useLayoutEffect.

Поскольку эффекты запускаются после commit, к моменту вызова useEffect значение ref.current уже установлено — даже при первом рендере.

Пример

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

  useEffect(() => {
    // ref.current уже указывает на DOM-узел
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
}

Если бы мы обратились к inputRef.current прямо в теле компонента, при первом рендере там был бы null, потому что DOM ещё не создан.

useLayoutEffect и useEffect

useLayoutEffect вызывается синхронно сразу после commit, до отрисовки браузером. useEffect — асинхронно, после отрисовки. В обоих случаях ref.current уже доступен, но useLayoutEffect полезен, когда нужно измерить DOM до paint.

Итог: ref — стабильный объект, а его поле current заполняется React во время commit-фазы, поэтому внутри эффектов оно доступно уже при первом рендере. Это делает ref удобным инструментом для работы с DOM и хранения мутируемых значений между рендерами.