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

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

Компании: Сбер

Стек: React

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

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

Однако есть способы оптимизации:

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

Пример:

JSX
const Child = React.memo(({ value }) => {
  console.log('Render');
  return <div>{value}</div>;
});

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      <Child value="static" />
    </>
  );
}

Здесь Child не перерисуется при клике, так как пропс value не меняется, а компонент обёрнут в React.memo. Без React.memo он бы перерисовывался каждый раз при обновлении Parent.