> Как реализовать кастомный хук для отслеживания первого рендера в React? (React, JavaScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Альфа-банк

Стек: React, JavaScript

> Пример ответа

Для отслеживания первого рендера в React можно создать кастомный хук useIsFirstRender. Он возвращает true только при первом рендере компонента, а затем false при последующих.

Вот простая реализация на JavaScript:

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

function useIsFirstRender() {
  const isFirst = useRef(true);

  useEffect(() => {
    isFirst.current = false;
  }, []);

  return isFirst.current;
}

Как это работает:

useRef создает изменяемый объект, который сохраняет значение между рендерами (без перерисовки).
Изначально isFirst.current равен true.
useEffect с пустым массивом зависимостей выполняется один раз после первого рендера, устанавливая isFirst.current = false.
Хук возвращает значение isFirst.current до выполнения эффекта, поэтому при первом рендере это true, а при последующих - false.

Пример использования:

JAVASCRIPT
function MyComponent() {
  const isFirstRender = useIsFirstRender();

  useEffect(() => {
    if (isFirstRender) {
      console.log('Первый рендер - выполняем начальную инициализацию');
    } else {
      console.log('Повторный рендер - обновляем данные');
    }
  }, [isFirstRender]);

  return <div>Компонент</div>;
}

Этот хук полезен для выполнения действий, которые должны происходить только при первом рендере (например, логирование, анимации появления) или для разграничения логики между первым и последующими рендерами.