> Перерисуется ли React-компонент при изменении пропсов? (React)

Короткий ответ

Да, React-компонент перерисовывается при изменении пропсов, но не всегда. По умолчанию React перерисовывает компонент, если его пропсы изменились (согласно поверхностному сравнению). Однако если компонент обёрнут в React.memo, перерисовка происходит только при реальном изменении пропсов. Также перерисовка может быть вызвана обновлением родительского компонента, даже если пропсы не изменились.

Подробное объяснение

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

Для оптимизации React предоставляет React.memo - higher-order component, который запоминает результат рендера и выполняет поверхностное сравнение пропсов. Если пропсы не изменились, React пропускает перерисовку и использует закешированный результат.

Важно понимать разницу между изменением пропсов и перерисовкой. Пропсы могут измениться, но если компонент не использует их в JSX или хуках, React всё равно может перерисовать компонент из-за родительского обновления. Использование React.memo предотвращает такие ненужные перерисовки.

На практике

На практике перерисовка при изменении пропсов - это ожидаемое поведение, но важно избегать лишних перерисовок для производительности. Основные сценарии:

• Для компонентов, которые часто получают новые пропсы (например, списки), используйте React.memo с кастомной функцией сравнения, если поверхностного сравнения недостаточно.
• Избегайте создания новых объектов или функций в пропсах при каждом рендере - это ломает мемоизацию. Используйте useCallback и useMemo.
• Для компонентов с тяжёлыми вычислениями используйте useMemo внутри компонента, чтобы избежать повторных вычислений при перерисовке.
• Помните, что React.memo имеет смысл только для чистых компонентов, которые при одинаковых пропсах всегда возвращают одинаковый результат.

Пример кода

JSX
import React, { memo, useState, useCallback } from 'react';

// Компонент без мемоизации - будет перерисовываться при каждом рендере родителя
const ExpensiveComponent = ({ data }) => {
  console.log('ExpensiveComponent rendered');
  return <div>{data.value}</div>;
};

// Мемоизированный компонент - перерисовывается только при изменении пропсов
const MemoizedComponent = memo(({ data }) => {
  console.log('MemoizedComponent rendered');
  return <div>{data.value}</div>;
});

const Parent = () => {
  const [count, setCount] = useState(0);
  const [data, setData] = useState({ value: 'initial' });

  // Проблема: новая функция создаётся каждый рендер
  const handleClick = () => setCount(c => c + 1);

  // Решение: useCallback мемоизирует функцию
  const handleUpdate = useCallback(() => {
    setData({ value: 'updated' });
  }, []);

  return (
    <div>
      <button onClick={handleClick}>Count: {count}</button>
      <button onClick={handleUpdate}>Update data</button>
      <ExpensiveComponent data={data} /> {/* перерисовывается при клике на count */}
      <MemoizedComponent data={data} /> {/* не перерисовывается при клике на count */}
    </div>
  );
};

Как отвечать на собеседовании

Начните с чёткого ответа "да, но с оговорками". Объясните базовый механизм: React перерисовывает компонент при изменении пропсов, но также может перерисовать его из-за обновления родителя. Упомяните React.memo как инструмент контроля перерисовок. Приведите пример, когда пропсы не изменились, но компонент перерисовался (родитель обновился). Покажите понимание trade-off между производительностью и сложностью кода при использовании мемоизации. Завершите практическими рекомендациями по оптимизации.

Что проверяет интервьюер

Интервьюер проверяет понимание жизненного цикла React-компонентов, механизма реконсиляции, разницы между виртуальным и реальным DOM. Важно показать знание оптимизаций (React.memo, useCallback, useMemo) и понимание, когда их применять. Также оценивается способность объяснить, почему React не всегда может определить изменение пропсов без явного указания, и как это связано с иммутабельностью данных.

Типичные ошибки

• Утверждение, что React никогда не перерисовывает компонент при неизменных пропсах - это верно только для React.memo.
• Игнорирование того, что родительский рендер вызывает перерисовку всех детей.
• Создание новых объектов/функций в пропсах при каждом рендере, что ломает мемоизацию.
• Чрезмерное использование React.memo для простых компонентов, где overhead от сравнения превышает выгоду.
• Путаница между React.memo и useMemo - первый для компонентов, второй для значений.