> Как сделать так, чтобы React компонент рендерился только при изменении определенного пропса (React)

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

Компании: EdenAI

Стек: React

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

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

Пример:

JSX
import React from 'react';

const MyComponent = React.memo(({ specificProp, otherProp }) => {
  console.log('Рендер компонента');
  return <div>{specificProp}</div>;
}, (prevProps, nextProps) => {
  // Возвращаем true, если пропсы равны (рендер не нужен)
  return prevProps.specificProp === nextProps.specificProp;
});

В этом примере компонент будет перерендериваться только при изменении specificProp, игнорируя изменения otherProp. Если функция сравнения возвращает true, React пропускает рендер. Это эффективно для оптимизации производительности, когда компонент зависит только от определенных данных.