Где лучше хранить флаг первого рендера: в state, ref или иначе? Почему?

В React есть два основных способа хранить значения между рендерами: useState и useRef. Они похожи по идее, но принципиально различаются по влиянию на жизненный цикл компонента. useState при изменении запускает повторный рендер, а useRef просто хранит мутируемое значение в объекте { current: ... } и не вызывает перерисовку.

Почему для флага первого рендера обычно берут useRef

Флаг первого рендера — это служебная метка, которая нужна только внутри логики компонента. Она не влияет на то, что видит пользователь, поэтому нет смысла перерисовывать UI из-за её изменения. Если положить такой флаг в useState, то после первого рендера вызов setState спровоцирует лишний рендер, что может привести к неожиданным эффектам, особенно внутри useEffect.

import { useEffect, useRef, useState } from 'react';

function Example() {
  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return; // пропускаем логику на первом рендере
    }
    console.log('Это уже не первый рендер');
  });

  return <div>Пример</div>;
}

Когда всё-таки нужен useState

Если значение флага должно влиять на разметку или на другие вычисления, которые обязаны отразиться в UI, тогда без useState не обойтись. Например, если до первого рендера нужно показать скелетон, а после — реальные данные, и это состояние должно быть видно в JSX.

const [isFirstRender, setIsFirstRender] = useState(true);

useEffect(() => {
  setIsFirstRender(false);
}, []);

return isFirstRender ? <Skeleton /> : <Content />;

Альтернативы

• Локальная переменная внутри компонента не подойдёт: она сбрасывается при каждом рендере.
• Модульная переменная вне компонента сохранится, но будет общей для всех экземпляров — это почти всегда ошибка.
• Иногда флаг вообще не нужен: например, если эффект идемпотентен или использует AbortController для отмены.

Итог: для служебного флага первого рендера выбирайте useRef — это избавляет от лишних перерисовок и делает логику предсказуемой. useState берите только тогда, когда значение действительно должно отражаться в интерфейсе.