Что происходит при первом рендере React-компонента?

Первый рендер компонента React, также известный как монтирование (mounting), — это процесс, когда компонент впервые добавляется в DOM-дерево. Понимание этого процесса критично для инициализации состояния, выполнения запросов к API и настройки подписок.

Этапы первого рендера

• Инициализация: Для функционального компонента React выполняет тело функции, вызывая все хуки (например, useState, useRef) в порядке их объявления. Для классового компонента сначала вызывается конструктор, где обычно инициализируется состояние.
• Рендер: React вызывает метод render (для классов) или саму функцию компонента, чтобы получить JSX. Этот JSX преобразуется в элементы React (виртуальный DOM).
• Согласование (Reconciliation): React сравнивает полученное виртуальное DOM-дерево с текущим реальным DOM (который изначально пуст для этого компонента) и вычисляет минимальный набор изменений.
• Фиксация (Commit): React применяет вычисленные изменения к реальному DOM, фактически создавая HTML-элементы на странице.
• Запуск эффектов монтирования: После того как компонент отображён в DOM, React планирует выполнение побочных эффектов. Для функциональных компонентов это вызов функции внутри useEffect с пустым массивом зависимостей []. Для классовых компонентов вызывается метод componentDidMount.

Практический пример

Рассмотрим функциональный компонент, который загружает данные при монтировании:

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  // 1. Инициализация состояния при первом рендере
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  // 3. Эффект, запускаемый после монтирования
  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(response => response.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
    // Пустой массив зависимостей гарантирует однократный запуск
  }, []);

  // 2. Возврат JSX для рендера
  if (loading) return Loading...;
  return (
    
      {user.name}
      {user.email}
    
  );
}

В этом примере порядок при первом рендере: объявление состояния, выполнение тела компонента (возврат Loading...), монтирование в DOM, а затем асинхронный вызов fetch внутри useEffect.

Где это применяется

Знание этапов монтирования используется для:

• Оптимизации производительности (избегание лишних рендеров).
• Корректной инициализации сторонних библиотек (например, карт или графиков), которым нужен доступ к DOM.
• Управления подписками на события или внешние данные, чтобы избежать утечек памяти.

Вывод: Понимание первого рендера позволяет правильно размещать код инициализации (в useEffect или componentDidMount), избегая распространённых ошибок, таких как выполнение побочных эффектов во время рендера или попытки доступа к DOM до его готовности.