Встречается на собеседованиях • сегодня

Какие знаешь подходы к оптимизации React приложения

Мемоизация компонентов – использование React.memo для предотвращения лишних ререндеров, если пропсы не изменились.

jsx

const MemoizedComponent = React.memo(Component);

useMemo / useCallback – кеширование значений и функций, чтобы избежать пересоздания при каждом рендере.

jsx

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

Ленивая загрузка (Lazy Loading) – динамический импорт компонентов через React.lazy и Suspense.

jsx

const LazyComponent = React.lazy(() => import('./LazyComponent'));

Оптимизация списков – использование key и виртуализация (например, react-window или react-virtualized).
Код-сплиттинг – разделение бандла на чанки (через Webpack или Vite).
Оптимизация контекста – разделение контекстов или использование селекторов (например, use-context-selector).
Избегание инлайн-функций/стилей – они создают новые объекты при каждом рендере.
Использование PureComponent – для классовых компонентов (аналог React.memo).

Это единственный вопрос по вашему фильтру

как отвечать на вопрос

пример собеседования

фреймворки на собеседовании

типичные вопросы junior

интервью вопросы и ответы