FAQ Портал
Категории
Поиск
О нас
Контакты
UK
RU
EN
Главная
Технологии
Программирование
React
React
100 вопросов
Что такое React и какие проблемы он решает?
•
React — библиотека для UI.
•
Решает проблему декларативного описания интерфейса.
•
UI = функция от состояния.
•
Упрощает композицию компонентов.
•
Хорошо работает с экосистемой (Router, state, build).
Чем React отличается от фреймворка?
•
React — только слой UI.
•
Роутинг/данные/архитектура выбираются отдельно.
•
Framework (Next/Remix) задаёт больше правил.
•
React гибче, но требует решений.
•
На больших проектах чаще берут фреймворк.
Что такое JSX и как он работает?
•
JSX — синтаксис, похожий на HTML в JS.
•
Компилируется в вызовы React.createElement.
•
Внутри можно писать выражения {expr}.
•
Атрибуты — props.
•
Обязательно один корневой элемент (или Fragment).
Зачем нужен ключ key в списках?
•
key помогает React сопоставлять элементы между рендерами.
•
Ускоряет diff и уменьшает баги.
•
key должен быть стабильным, не индексом (если список меняется).
•
Лучше использовать id из данных.
•
Неправильный key приводит к 'прыгающему' состоянию.
Что такое компонент и какие виды компонентов бывают?
•
Компонент — функция/класс, возвращающая UI.
•
Функциональные компоненты — стандарт сегодня.
•
Классовые встречаются в legacy.
•
Компоненты бывают 'контейнеры' и 'презентационные'.
•
Композиция важнее наследования.
Что такое props и как их правильно использовать?
•
props — входные данные компонента.
•
props неизменяемые (read-only).
•
Для изменения поведения передавай колбэки.
•
Делай props минимальными и понятными.
•
Используй default значения через параметры функции.
Что такое state и когда он нужен?
•
state — внутреннее состояние компонента.
•
Используй для данных, которые меняются со временем.
•
Держи state как можно ближе к месту использования.
•
Не дублируй вычисляемые данные в state.
•
Для общего состояния — поднимай вверх или используй store.
Как работает useState и почему setState асинхронный?
•
useState возвращает значение и сеттер.
•
setState планирует обновление и ререндер.
•
Обновления могут батчиться.
•
Для зависимости от предыдущего значения используй функцию: setX(prev => ...).
•
Не рассчитывай на мгновенное изменение после setState.
Как обновлять объекты и массивы в state без мутаций?
•
Не мутируй state напрямую.
•
Объект: setS(prev => ({ ...prev, a: 1 })).
•
Массив: setA(prev => [...prev, item]).
•
Для удаления: filter.
•
Для сложных структур можно использовать immer.
Что такое derived state и почему он вреден?
•
Derived state — когда state дублирует вычисляемое значение.
•
Это приводит к рассинхронизации.
•
Лучше вычислять через useMemo или прямо в рендере.
•
Храни источник истины один раз.
•
Исключение — когда нужно 'зафиксировать' значение во времени.
Что такое lifting state up и когда его делать?
•
Это перенос state в общий родитель.
•
Нужен, когда нескольким компонентам нужен один источник истины.
•
Родитель хранит state и передаёт props вниз.
•
Дочерние вызывают колбэки для изменений.
•
Альтернатива — context/store, если дерево большое.
Как работает useEffect и для чего он нужен?
•
useEffect выполняет side effects после рендера.
•
Подходит для подписок, запросов, работы с DOM.
•
Зависимости задаются массивом deps.
•
Возврат функции — cleanup.
•
Не используй useEffect для вычисления derived state.
Как правильно задавать зависимости useEffect?
•
Указывай все значения, используемые внутри эффекта.
•
Не отключай eslint правило без причины.
•
Для функций используй useCallback.
•
Для объектов — useMemo.
•
Если эффект слишком 'шумный' — пересмотри архитектуру.
Чем отличается useEffect от useLayoutEffect?
•
useEffect запускается после отрисовки браузером.
•
useLayoutEffect — синхронно после DOM-мутаций, до покраски.
•
useLayoutEffect может блокировать рендер.
•
Используй его для измерений/мигания UI.
•
В большинстве случаев достаточно useEffect.
Почему нельзя вызывать хуки условно?
•
React полагается на порядок вызова хуков.
•
Условный вызов ломает порядок.
•
Это приводит к багам и неверному состоянию.
•
Правило: хуки только на верхнем уровне компонента.
•
Вынеси условность внутрь хука/эффекта.
Что такое useMemo и когда он полезен?
•
useMemo кэширует результат вычисления.
•
Нужен для дорогих вычислений или стабильных ссылок.
•
Не заменяет оптимизацию рендера везде.
•
Следи за deps, иначе будет stale.
•
Часто полезен перед передачей в memo/эффекты.
Что такое useCallback и чем он отличается от useMemo?
•
useCallback кэширует функцию.
•
useMemo кэширует значение.
•
useCallback(fn, deps) ~= useMemo(() => fn, deps).
•
Полезно для передачи колбэков в memo-компоненты.
•
Не применяй без нужды: это тоже накладные расходы.
Когда memo действительно помогает, а когда нет?
•
memo полезен, если компонент часто ререндерится с теми же props.
•
Если props меняются всегда (новые объекты) — пользы мало.
•
Оптимизация требует измерений (профилируй).
•
memo увеличивает сложность.
•
Сначала оптимизируй архитектуру и состояние.
Что такое React.memo и как он работает?
•
Оборачивает компонент и пропускает ререндер, если props не изменились (shallow).
•
Сравнение поверхностное.
•
Можно передать кастомную функцию сравнения.
•
Стабилизируй props (useMemo/useCallback).
•
Не забывай про контекст: он всё равно вызовет ререндер.
Почему опасно оптимизировать React 'на глаз'?
•
Часто проблема не там, где кажется.
•
useMemo/useCallback могут ухудшить.
•
Нужен профайлер React DevTools.
•
Измеряй до/после.
•
Оптимизация должна быть оправданной.
Что такое reconciliation (согласование) в React?
•
Это алгоритм сравнения старого и нового дерева.
•
React пытается минимизировать изменения DOM.
•
key в списках влияет на reconcilation.
•
Изменение типа компонента => размонтирование/монтирование.
•
Структура дерева важна для производительности.
Что такое virtual DOM и почему это не 'магия'?
•
Virtual DOM — объектное представление UI.
•
React сравнивает деревья и применяет патчи.
•
Выигрыш не в скорости, а в удобстве декларативного UI.
•
Реальная стоимость — рендер и сравнение.
•
Правильное управление состоянием важнее.
Почему компонент ререндерится и как это понять?
•
Ререндер из-за изменения state/props/context.
•
Родительский ререндер не всегда = DOM обновление.
•
Используй React DevTools Profiler.
•
Для отладки можно временно добавить лог.
•
Проверяй стабильность props и селекторы состояния.
Что такое controlled components (контролируемые формы)?
•
Поле ввода управляется state.
•
value и onChange связывают UI и данные.
•
Даёт валидацию и контроль.
•
Может быть медленнее на больших формах.
•
Альтернатива — uncontrolled + refs/формы и библиотеки.
Как сделать uncontrolled input и когда это оправдано?
•
Используй defaultValue вместо value.
•
Читай значение через ref при submit.
•
Подходит для больших форм, где важна производительность.
•
Валидацию делай на submit/blur.
•
React Hook Form часто использует этот подход.
Как правильно обрабатывать события в React?
•
События — SyntheticEvent (в большинстве случаев).
•
Используй onClick/onChange и т.п.
•
Не вызывай обработчик сразу: onClick={() => ...}.
•
Для производительности выноси обработчик в функцию.
•
Помни про всплытие и stopPropagation.
Чем SyntheticEvent отличается от нативных событий?
•
Это обёртка над нативным событием.
•
Обеспечивает единое API в разных браузерах.
•
В старых версиях был pooling, сейчас меньше проблем.
•
event.nativeEvent даёт нативное событие.
•
Обычно достаточно SyntheticEvent.
Как правильно работать с refs и когда они нужны?
•
refs дают доступ к DOM/инстансу.
•
Нужны для фокуса, измерений, интеграции с библиотеками.
•
Не используй refs для данных вместо state.
•
useRef хранит mutable значение без рендера.
•
Для прокидывания ref используйте forwardRef.
Что такое forwardRef и когда он нужен?
•
forwardRef позволяет передать ref внутрь компонента.
•
Нужен для компонентных библиотек.
•
Упрощает фокусировку и интеграции.
•
Старайся не протекать DOM-деталями без нужды.
•
Типизируй ref в TS явно.
Что такое useImperativeHandle и стоит ли его использовать?
•
Позволяет кастомизировать API ref.
•
Полезно для контролов (focus, reset).
•
Это императивный путь, используй редко.
•
Предпочитай декларативные props.
•
Если используешь — документируй методы.
Что такое Context API и какие у него ограничения?
•
Context передаёт данные сквозь дерево без props.
•
Хорош для темы, локали, auth.
•
Частые изменения context могут ререндерить многих.
•
Используй разделение контекстов и memo.
•
Для сложных кейсов лучше store с селекторами.
Как избежать лишних ререндеров из-за Context?
•
Делай несколько контекстов вместо одного большого.
•
Передавай примитивы или мемоизированные объекты.
•
Оборачивай провайдеры ближе к потребителям.
•
Вынеси логику в store/селекторы.
•
Проверяй профайлером.
Что такое custom hooks и зачем они нужны?
•
Это функции, которые используют хуки и переиспользуют логику.
•
Упрощают композицию поведения.
•
Делают компоненты тонкими.
•
Название должно начинаться с use.
•
Внутри соблюдай правила хуков.
Как проектировать custom hooks, чтобы они были переиспользуемыми?
•
Держи API минимальным: входы и выходы.
•
Не привязывай хук к конкретному UI.
•
Возвращай данные и колбэки.
•
Не скрывай побочные эффекты.
•
Документируй ожидания и edge cases.
Что такое React Router и какие альтернативы есть?
•
React Router — популярный роутер для SPA.
•
Альтернатива: Next.js routing, Remix routing.
•
Для мобильных: React Navigation.
•
Выбор зависит от SSR/SPA и требований.
•
В больших проектах важны data APIs и loaders.
Что такое SSR, CSR и SSG (в контексте React)?
•
CSR — рендер в браузере.
•
SSR — HTML рендерится на сервере.
•
SSG — HTML генерируется на этапе сборки.
•
SSR улучшает SEO и FCP, но сложнее.
•
SSG хорош для контента, но требует регенерации данных.
Что такое hydration и какие проблемы бывают?
•
Hydration — 'оживление' SSR HTML в браузере.
•
React сравнивает разметку и навешивает обработчики.
•
Несовпадение данных => hydration mismatch.
•
Избегай случайных значений при первом рендере (Date.now).
•
Разделяй server/client компоненты (в Next).
Почему происходит hydration mismatch и как его исправлять?
•
Разный HTML на сервере и клиенте.
•
Причины: время, random, доступ к window, условные ветки.
•
Используй client-only рендер через useEffect или dynamic import.
•
Держи данные一致ными (prefetch).
•
Проверяй окружение (typeof window).
Как безопасно использовать window/document в React?
•
В SSR window недоступен.
•
Доступайся внутри useEffect или проверяй typeof window !== 'undefined'.
•
Для размеров окна используй подписки и cleanup.
•
Для cookies/localStorage учитывай SSR.
•
В Next 13+ используй client components.
Как работать с data fetching в React?
•
Базово: fetch в effect + state.
•
Важно: отмена запросов (AbortController).
•
Обработка loading/error.
•
Для кэша/рефетча лучше TanStack Query.
•
В SSR фреймворках используй серверные loaders.
Как правильно обрабатывать loading/error/empty состояния?
•
Показывай skeleton/spinner для loading.
•
Для error — понятное сообщение + retry.
•
Для empty — отдельный UI и CTA.
•
Не смешивай логику получения данных и отображения.
•
Держи состояние явным (discriminated union).
Как отменять запросы и избегать race conditions?
•
Используй AbortController и signal в fetch.
•
В cleanup эффекта вызывай abort.
•
Храни requestId и игнорируй устаревшие ответы.
•
Используй библиотеки с дедупликацией запросов.
•
Не вызывай setState после unmount.
Что такое Suspense и для чего он используется?
•
Suspense позволяет показывать fallback, пока ресурс не готов.
•
В основном используется для lazy и данных в фреймворках.
•
Suspense boundary локализует загрузку.
•
Не заменяет обработку ошибок — нужен Error Boundary.
•
В экосистеме data fetching поддержка зависит от стека.
Как работает React.lazy и code splitting?
•
React.lazy загружает компонент динамически.
•
Используй вместе с <Suspense fallback>.
•
Разделяй по роутам/тяжёлым виджетам.
•
Не дроби слишком мелко — много чанков вредно.
•
В сборщике включи анализ (bundle analyzer).
Что такое Error Boundary и зачем он нужен?
•
Ловит ошибки во время рендера/жизненного цикла.
•
Не ловит ошибки в async/handlers.
•
Показывает fallback UI.
•
Реализуется через класс-компонент или библиотеку.
•
Добавь логирование (Sentry) в componentDidCatch.
Как делать формы и валидацию в React?
•
Маленькие формы можно на useState.
•
Большие — лучше React Hook Form.
•
Валидацию делай схемой (zod/yup).
•
Для UX: validate onBlur или debounce.
•
Показывай ошибки рядом с полем и в целом.
Что такое React Hook Form и почему его любят?
•
Он минимизирует ререндеры.
•
Использует uncontrolled inputs по умолчанию.
•
Удобная интеграция со схемами.
•
Хорошо масштабируется на большие формы.
•
Меньше boilerplate, чем ручные решения.
Как сделать debounce для поиска/инпута?
•
Используй setTimeout/clearTimeout в useEffect.
•
Или библиотеку lodash.debounce.
•
Храни сырое значение отдельно от применённого.
•
Учитывай отмену запросов.
•
Не забудь cleanup.
Как управлять фокусом и доступностью (a11y) в React?
•
Используй семантические элементы (button, label).
•
Управляй фокусом через ref.
•
В модалках делай focus trap.
•
Добавляй aria-* только когда нужно.
•
Тестируй клавиатурой и скринридером.
Как правильно реализовать модальное окно?
•
Рендери через portal (в конец body).
•
Закрытие по Esc и по клику на overlay.
•
Блокируй скролл подложки.
•
Держи focus trap и возвращай фокус.
•
Обрабатывай accessibility (role='dialog').
Что такое Portal и когда он нужен?
•
Portal рендерит детей в другой DOM-узел.
•
Нужен для модалок, тултипов, выпадающих меню.
•
Избегает проблем с overflow/z-index.
•
События всё равно всплывают по React дереву.
•
Следи за доступностью.
Как работает batch updates в React?
•
React может объединять несколько setState в один рендер.
•
Это уменьшает перерисовки.
•
В React 18 батчинг работает и в async контекстах.
•
Не полагайся на порядок сеттеров без функциональной формы.
•
Для синхронного чтения используй useEffect после рендера.
Что такое concurrent rendering в React 18?
•
Это возможность прерывать и продолжать рендер.
•
Улучшает отзывчивость UI.
•
Не означает автоматическое ускорение.
•
Нужны правильные приоритеты (transitions).
•
При несовместимых библиотеках возможны баги.
Что такое useTransition и когда он полезен?
•
Позволяет пометить обновления как низкоприоритетные.
•
UI остаётся отзывчивым при тяжёлых обновлениях.
•
Возвращает isPending для UI состояния.
•
Полезно для фильтров/переключений списка.
•
Не заменяет оптимизацию данных.
Что такое useDeferredValue и чем он отличается от debounce?
•
Это отложенное значение для низкого приоритета.
•
Не задерживает события, а позволяет отрисовать позже.
•
Хорошо для поиска по большому списку.
•
Debounce задерживает вызов, а deferred — приоритет рендера.
•
Комбинируй осознанно.
Как правильно писать ключи и идентификаторы для компонентов?
•
key нужен только для списков.
•
Используй стабильный id из данных.
•
Не используй random/Date.now для key.
•
Не используй индекс, если элементы могут переставляться/удаляться.
•
Плохой key ломает сохранение локального state.
Как работать с поднятием обработчиков событий?
•
Обработчик хранится выше, где есть state.
•
Дочерний компонент вызывает props.onAction(data).
•
Это упрощает тестирование.
•
Не передавай слишком много колбэков — группируй actions.
•
Для сложных сценариев используйте reducer.
Что такое useReducer и когда его выбирать вместо useState?
•
useReducer удобен для сложного состояния.
•
Когда есть множество действий и переходов.
•
Упрощает тестирование (reducer как чистая функция).
•
Хорошо сочетается с discriminated unions.
•
Можно использовать для форм и комплексных UI.
Как проектировать reducer: действия и типы?
•
Действия как union: { type: 'add', payload: ... } | ....
•
Делай exhaustive check в switch.
•
Держи reducer чистым без side effects.
•
Side effects выноси в эффекты или middleware (в store).
•
Пиши тесты на каждый action.
Как избегать prop drilling?
•
Подними компоненты ближе друг к другу.
•
Используй composition (children) и render props.
•
Используй Context для действительно глобального.
•
Используй store для сложного общего состояния.
•
Не превращай Context в свалку.
Что такое children и как использовать композицию?
•
children — это вложенный контент компонента.
•
Позволяет строить композицию (Layout, Card).
•
Делает API гибким.
•
Можно комбинировать с render props.
•
Избегай слишком сложных абстракций.
Что такое render props и когда это полезно?
•
Это паттерн: пропс — функция, возвращающая UI.
•
Позволяет делиться логикой.
•
Сейчас чаще заменяется хуками.
•
Полезно для компонентов-библиотек.
•
Следи за производительностью (новая функция каждый рендер).
Что такое compound components и где они применяются?
•
Это набор связанных компонентов (Tabs, Menu).
•
Общий state хранится в родительском компоненте.
•
Дочерние читают state через context.
•
Дает удобный API и композицию.
•
Требует внимательной типизации и docs.
Как типизировать props в React + TypeScript?
•
Опиши type/interface Props.
•
function C(props: Props) {}.
•
Для children: React.ReactNode.
•
Для onClick: (e: React.MouseEvent) => void.
•
Не злоупотребляй React.FC, если не нужен.
Как типизировать компоненты, которые принимают компонент/иконку?
•
Принимай React.ComponentType<Props>.
•
Для иконок часто: React.ComponentType<React.SVGProps<SVGSVGElement>>.
•
Или конкретный тип библиотеки (LucideIcon).
•
Держи пропсы минимальными.
•
Не принимай any для компонентов.
Как тестировать React компоненты?
•
Основной подход: React Testing Library.
•
Тестируй поведение, а не implementation details.
•
Используй user-event для реальных сценариев.
•
Мокай сеть и внешние зависимости.
•
E2E (Playwright/Cypress) для ключевых потоков.
Что тестировать: юнит, интеграцию или e2e?
•
Юнит — чистые функции/редьюсеры.
•
Интеграция — компоненты с взаимодействием.
•
E2E — критические пользовательские сценарии.
•
Не пытайся покрыть всё e2e.
•
Баланс зависит от риска и стоимости тестов.
Как мокать fetch/HTTP запросы в тестах?
•
Для fetch можно использовать MSW.
•
MSW мокает на уровне сети (реалистично).
•
Для unit-тестов можно мокать клиент (axios).
•
Следи за сбросом моков между тестами.
•
Проверяй состояния loading/error.
Что такое StrictMode и почему эффекты могут вызываться дважды в dev?
•
StrictMode включает доп. проверки в dev.
•
Может двойной раз запускать эффекты для поиска ошибок.
•
В production этого нет.
•
Пиши эффекты идемпотентными и с cleanup.
•
Не используйте StrictMode как баг в проде.
Как правильно логировать и отлаживать React?
•
Используй React DevTools.
•
Profiler для производительности.
•
Ставь брейкпоинты в обработчиках и эффектах.
•
Для сложных багов — минимальный репродьюс.
•
Не оставляй console.log в проде.
Как работать с состоянием URL (query params) в React?
•
URL — тоже состояние приложения.
•
Синхронизируй фильтры/пагинацию с query.
•
Используй роутер API (React Router/Next).
•
Обрабатывай отсутствие параметров дефолтами.
•
Не делай setState в useEffect без нужды.
Как хранить авторизацию (tokens) в React приложении?
•
Не храни токены в localStorage, если риск XSS высокий.
•
Предпочитай httpOnly cookies (если возможно).
•
Разделяй auth state и user profile.
•
Добавляй refresh токены по протоколу бэка.
•
Логируй выход и обработку 401/403.
Как защититься от XSS в React?
•
React экранирует строки по умолчанию.
•
Опасно использовать dangerouslySetInnerHTML.
•
Санитизируй HTML через DOMPurify.
•
Не вставляй сырой пользовательский ввод в HTML.
•
CSP и безопасные заголовки тоже важны.
Когда использовать dangerouslySetInnerHTML и как делать это безопаснее?
•
Используй только если нужно рендерить HTML (markdown).
•
Санитизируй контент.
•
Ограничь поддерживаемые теги.
•
Избегай inline scripts и event handlers.
•
Думай о CSP.
Как правильно работать со стилями в React?
•
Варианты: CSS Modules, Tailwind, styled-components, plain CSS.
•
Выбирай по команде и проекту.
•
Держи стили рядом с компонентом, но не смешивай логику.
•
Следи за спецификой и переопределениями.
•
Для дизайна-системы удобно иметь компоненты и токены.
Как организовать папки и архитектуру React проекта?
•
Фиче-ориентированная структура обычно лучше.
•
Разделяй UI, hooks, services, types.
•
Держи бизнес-логику вне компонентов.
•
Избегай слишком больших компонентов.
•
Устанавливай правила импорта и границы модулей.
Что такое container/presentational pattern и актуален ли он?
•
Container отвечает за данные и логику, presentational — за UI.
•
Помогает разделять ответственность.
•
Сейчас часто реализуется через hooks.
•
Полезен в больших командах.
•
Не делай жёсткую структуру, если проект маленький.
Как избегать утечек памяти в React?
•
Чисти подписки в cleanup эффекта.
•
Отменяй запросы при unmount.
•
Не сохраняй большие объекты в глобальном состоянии без нужды.
•
Следи за listeners на window/document.
•
Используй профилирование и DevTools.
Почему нельзя вызывать setState после unmount и как этого избегать?
•
Компонент уже размонтирован, обновление не нужно.
•
Это вызывает предупреждения и потенциальные утечки.
•
Отменяй async операции в cleanup.
•
Используй AbortController или игнорируй устаревшие ответы.
•
Библиотеки данных решают это автоматически.
Как правильно работать с таймерами setTimeout/setInterval?
•
Ставь таймер в useEffect.
•
Чисти его в cleanup (clearTimeout/clearInterval).
•
Для interval учитывай stale closures (useRef).
•
Не создавай таймер на каждый рендер.
•
Для сложной логики сделай custom hook.
Что такое stale closures в хуках и как их избежать?
•
Замыкание может удерживать старые значения.
•
Часто встречается в setInterval/handlers.
•
Добавляй зависимости или используй функциональный setState.
•
Храни актуальное значение в useRef.
•
Не игнорируй deps ради тишины линтера.
Почему setState в цикле/несколько раз подряд может вести себя неожиданно?
•
Обновления батчатся.
•
Значение может быть устаревшим.
•
Используй функциональные обновления.
•
Для последовательных изменений объединяй в один setState.
•
Для сложных сценариев лучше reducer.
Как правильно пробрасывать функции вниз по дереву?
•
Стабилизируй колбэки через useCallback, если это важно.
•
Не злоупотребляй useCallback без профайла.
•
Группируй колбэки в объект actions (мемоизированный).
•
Используй context/store для глобальных действий.
•
Следи за тем, чтобы UI-компоненты оставались простыми.
Что такое dependency inversion в React UI?
•
Компонент зависит от абстракции (props), а не от сервиса напрямую.
•
Передавай функции загрузки/сохранения как зависимости.
•
Упрощает тестирование.
•
Упрощает замену реализации API.
•
Особенно полезно в больших проектах.
Когда использовать глобальный state manager (Redux/Zustand/Jotai)?
•
Когда много экранов используют одни данные.
•
Когда нужно кэширование, селекторы, devtools.
•
Когда prop drilling становится проблемой.
•
Не используй store для локального UI state.
•
Оцени стоимость внедрения и обучения команды.
Redux vs Zustand: что выбрать?
•
Redux хорош для больших команд и строгих паттернов.
•
Redux Toolkit уменьшает boilerplate.
•
Zustand проще и меньше по коду.
•
Zustand хорошо подходит для UI и небольших сторов.
•
Выбор зависит от требований к middleware/экосистеме.
Что такое selector и почему он важен для производительности?
•
Selector выбирает часть состояния.
•
Уменьшает ререндеры, если компонент подписан только на нужное.
•
В Redux — reselect/memoized selectors.
•
В Zustand — selector в useStore.
•
Селекторы помогают держать компонент узким.
Как избежать перерисовок большого списка (1000+ элементов)?
•
Используй виртуализацию (react-window/react-virtual).
•
Держи элементы простыми.
•
Стабилизируй key.
•
Не делай тяжелые вычисления в рендере.
•
Разделяй список на мемоизированные элементы.
Что такое virtualization и как она работает?
•
Рендерится только видимая часть списка.
•
Остальные элементы подменяются пустым пространством.
•
Сильно снижает нагрузку на DOM.
•
Требует фиксированных/измеряемых размеров элементов.
•
Хорошо для таблиц и логов.
Как оптимизировать рендер таблиц в React?
•
Виртуализация строк/колонок.
•
Мемоизация ячеек и колонок.
•
Стабильные колбэки и данные.
•
Разделяй состояние сортировки/фильтрации.
•
Рассмотри готовые libs (TanStack Table).
Как правильно обрабатывать ошибки в асинхронных обработчиках?
•
try/catch внутри async handler.
•
Показывай user-friendly сообщение.
•
Логируй детали в мониторинг.
•
Не оставляй ошибки молчаливыми.
•
Для запросов используй централизованный клиент.
Что такое react-query (TanStack Query) и когда он нужен?
•
Управляет серверным состоянием: кэш, рефетч, дедуп.
•
Упрощает loading/error.
•
Имеет invalidation и optimistic updates.
•
Убирает много ручного кода.
•
Не заменяет client-side state для UI.
Что такое optimistic update и какие риски?
•
UI обновляется до ответа сервера.
•
Улучшает UX.
•
Нужно уметь откатывать при ошибке.
•
Следи за конкурирующими запросами.
•
Библиотеки данных помогают реализовать правильно.
Как реализовать пагинацию и infinite scroll?
•
Пагинация: page/pageSize в URL и запросах.
•
Infinite scroll: подгрузка по scroll/IntersectionObserver.
•
Следи за повторными запросами и дедупом.
•
Показывай loader и конец списка.
•
Виртуализация часто нужна вместе с infinite.
Как использовать IntersectionObserver в React?
•
Создай ref на sentinel элемент.
•
В effect создай observer и подпишись.
•
В callback триггери загрузку следующей страницы.
•
Не забудь cleanup: disconnect.
•
Учитывай зависимости и stale closures.
Как правильно работать с локализацией (i18n) в React?
•
Используй библиотеку (react-i18next).
•
Храни ключи, а не строки в коде.
•
Следи за форматированием дат/чисел (Intl).
•
Не склеивай строки вручную.
•
Планируй plural rules и контекст.
Как сделать темизацию (dark/light) в React?
•
Храни тему в context/store.
•
Сохраняй выбор в localStorage/cookie.
•
Учитывай prefers-color-scheme.
•
Для CSS используй variables или Tailwind.
•
Не ломай SSR: начальная тема должна быть согласована.
Как внедрить мониторинг ошибок и производительности?
•
Подключи Sentry или аналог.
•
Логируй ошибки из Error Boundary.
•
Добавь трассировку производительности.
•
Отмечай релизы и sourcemaps.
•
Не отправляй PII без необходимости.
Какие типичные ошибки новичков в React?
•
Мутировать state.
•
Делать derived state и sync через useEffect.
•
Забывать key и deps.
•
Хранить слишком много в глобальном стейте.
•
Оптимизировать без измерений.
Практические правила для поддерживаемого React-кода?
•
Держи компоненты маленькими и ответственными за одно.
•
Состояние держи близко к месту использования.
•
Разделяй server-state и UI-state.
•
Пиши тесты на критические сценарии.
•
Оптимизируй по профилю, а не по ощущениям.
React — Программирование — Технологии — FAQ Портал