PassFront
  1. PassFront
  2. База знаний
  3. Основы React

Какие основные подходы в написании кода в React?

Основы React

«Подходы в написании кода» на React — это набор принципов, которые отличают поддерживаемый код от каши.

Декларативность и чистота

UI описывается как функция состояния; тело компонента — чистое (без запросов, мутаций, подписок). Побочные эффекты — в useEffect, реакции на действия — в обработчиках.

Иммутабельность

Состояние обновляется новыми объектами (spread/map/filter/Immer). Мутации невидимы для React: ломаются рендеры, memo и зависимости хуков.

Композиция вместо наследования

Компоненты собираются из компонентов; расширение — через children/слоты и compound-компоненты, а не наследование классов.

Минимальное состояние и правильный уровень

  • Не хранить производные данные (вычислять в рендере/useMemo).
  • Состояние — как можно ближе к месту использования; вверх поднимать только по необходимости.
  • Разделять типы состояния: локальный UI (useState) / общий клиентский (стор) / серверный кеш (React Query) / URL (роутер).

Однонаправленный поток данных

Данные вниз через props, события вверх через колбэки; источник правды единственный.

Переиспользование логики через хуки

Повторяющееся поведение — в кастомные хуки (useDebounce, useAuth), а не в HOC-обёртки.

Разделение ответственности

«Умные» компоненты (данные, логика) отделены от презентационных (props → разметка); UI-кит не знает о бизнес-логике.

Прагматичная оптимизация

Мемоизация — по результатам профилирования, а не по умолчанию; сначала структурные правки.

Коротко для собеседования

Декларативность и чистый рендер, иммутабельность состояния, композиция вместо наследования, минимальное состояние на правильном уровне (и разделение локального/глобального/серверного/URL), однонаправленный поток данных, переиспользование логики кастомными хуками, разделение умных и презентационных компонентов, оптимизация по профайлеру.

Другие вопросы раздела