> Какие способы оптимизации рендеринга в React существуют (React)

Основные способы оптимизации рендеринга в React:

1. React.memo - предотвращает повторный рендер компонента, если пропсы не изменились (поверхностное сравнение). Полезно для «тяжелых» компонентов, которые редко меняют пропсы.

2. useMemo - мемоизирует результат вычислений. Используется для дорогих операций (сортировка, фильтрация больших массивов), чтобы не пересчитывать их при каждом рендере.

3. useCallback - мемоизирует функции-колбэки, чтобы они не создавались заново. Особенно важно при передаче функций в дочерние компоненты, обернутые в React.memo.

4. Избегание инлайн-объектов и функций в JSX - каждый раз создаются новые ссылки, что ломает мемоизацию. Выносите их в константы или useMemo/useCallback.

5. Ключи (keys) в списках - стабильные и уникальные ключи помогают React эффективно обновлять только изменившиеся элементы, а не пересоздавать весь список.

6. Ленивая загрузка (React.lazy + Suspense) - разделение кода на чанки, загрузка компонентов только когда они нужны (например, для маршрутов).

7. Виртуализация списков - библиотеки вроде react-window или react-virtualized рендерят только видимые элементы, экономя DOM-узлы при больших списках.

8. Избегание ненужных ререндеров - поднимайте состояние выше, используйте контекст разумно (разделяйте контексты по смыслу), применяйте useRef для значений, не влияющих на UI.

9. Профилирование - используйте React DevTools Profiler для поиска узких мест, а не оптимизируйте вслепую.