Оптимизация производительности компонентов в React требует системного подхода: анализа причин лишних рендеров, управления памятью, эффективной структуры данных и правильного применения хуков. React по умолчанию перерендеривает компоненты при изменении пропсов или состояния, и если не контролировать это поведение, приложение может начать "тормозить", особенно при большом количестве компонентов или сложной логике.

1. Избегать ненужных ререндеров

Компоненты в React повторно рендерятся, если:

• Изменилось состояние (useState)

• Изменились пропсы

• Изменился контекст (useContext)

Даже если визуально ничего не изменилось, функции и объекты, передаваемые в props, могут иметь новую ссылку, что вызовет ререндер. Чтобы этого избежать, можно использовать:

• React.memo — для мемоизации функциональных компонентов

• useMemo — для мемоизации вычислений

• useCallback — для мемоизации функций

Пример:

const Button = React.memo(({ onClick }) => {
console.log("Button rendered");
return <button onClick={onClick}>Click</button>;
});

2. Использование React.memo

Это HOC (Higher-Order Component), который оборачивает компонент и предотвращает его повторный рендер, если props не изменились по ссылке (===). Полезно при работе с примитивными и стабильными значениями.

Пример:

const MyComponent = React.memo(function MyComponent({ value }) {
return <div>{value}</div>;
});

Можно также передать функцию сравнения areEqual(prevProps, nextProps):

React.memo(Component, (prevProps, nextProps) => {
return prevProps.id === nextProps.id;
});

3. Оптимизация коллбеков через useCallback

Если компоненту в props передаётся функция, которая создаётся на каждом рендере, то даже React.memo дочернего компонента не поможет — ссылка будет разной. Решение — мемоизировать функцию:

const handleClick = useCallback(() => {
doSomething();
}, \[\]);

Это особенно важно, если коллбек передаётся глубоко вниз по дереву компонентов.

4. Оптимизация значений через useMemo

При передаче сложных объектов или массивов в props, их следует мемоизировать:

const options = useMemo(() => ({ sort: "asc" }), \[\]);

Без useMemo объект будет новым при каждом рендере.

5. Разделение компонентов на мелкие

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

6. Использование key в списках

При рендере списков key позволяет React точно отслеживать, какие элементы изменились. Неправильные key могут вызывать ререндер всех элементов списка.

{list.map(item => <Item key={item.id} data={item} />)}

Никогда не используй индекс массива как ключ, если порядок элементов может меняться.

7. Оптимизация списков с react-window или react-virtualized

Если рендерится большой список (сотни/тысячи элементов), имеет смысл использовать виртуализацию: отрисовывать на экране только те элементы, которые реально видимы.

Пример с react-window:

import { FixedSizeList as List } from 'react-window';
<List
height={500}
itemCount={1000}
itemSize={35}
width={300}
\>
{({ index, style }) => &lt;div style={style}&gt;{items\[index\]}&lt;/div&gt;}
&lt;/List&gt;

Это резко снижает нагрузку на DOM.

8. Избегать анонимных функций в JSX

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

Плохо:

<MyComponent onClick={() => doSomething()} />

Лучше:

const onClick = useCallback(() => doSomething(), \[\]);
<MyComponent onClick={onClick} />

9. Избегать глубоких вложенных объектов в состоянии

Если использовать в useState сложные вложенные объекты, изменение одного поля потребует копирования всего объекта, и это может быть неэффективно. Лучше использовать нормализацию или выносить поля в отдельные состояния.

10. Использование useTransition и startTransition

Позволяет обозначить менее приоритетные обновления, чтобы не блокировать UI. Особенно полезно при фильтрации, рендере списков и т.п.

const \[isPending, startTransition\] = useTransition();
startTransition(() => {
setFilteredList(expensiveFilter());
});

11. Работа с useDeferredValue

Позволяет отложить обновление значения, чтобы рендер происходил не сразу, а с задержкой. Хорошо сочетается с вводом текста, фильтрацией и т.д.

const deferredValue = useDeferredValue(searchTerm);
const filtered = useMemo(() => {
return items.filter(item => item.includes(deferredValue));
}, \[deferredValue\]);

12. Использование Profiler для анализа

React.Profiler помогает понять, какие компоненты рендерятся и сколько это занимает времени.

<Profiler id="MyComponent" onRender={(...args) => console.log(args)}>
<MyComponent />
</Profiler>

Это удобно при поиске "тяжёлых" мест в UI.

13. Разделение логики и отображения

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

14. Контролируй Context

Обновление значения в React.createContext вызывает ререндер всех компонентов, использующих useContext. Это может стать бутылочным горлышком. Можно избежать этого:

• Разделяя контексты на мелкие (например, один для темы, другой для пользователя)

• Используя мемоизацию значений контекста через useMemo

• Вынося Provider как можно ближе к нуждающимся компонентам

Пример:

const value = useMemo(() => ({ theme }), \[theme\]);
<ThemeContext.Provider value={value}>...</ThemeContext.Provider>

15. Отложенная загрузка компонентов (React.lazy)

Для тяжёлых компонентов, которые не нужны сразу после загрузки страницы, можно использовать динамический импорт:

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
&lt;Suspense fallback={<Spinner /&gt;}>
&lt;HeavyComponent /&gt;
&lt;/Suspense&gt;

Это улучшает время первой отрисовки и общее восприятие скорости.

16. Минимизация количества состояний

Каждый useState или useReducer создаёт дополнительный триггер для рендера. Объединение взаимосвязанных состояний или вынос их в родительский компонент помогает оптимизировать поведение.

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