Шпаргалка по React
Доступный для поиска и печати справочник по React 19 — компоненты, JSX, хуки, новые API Actions, контекст, рефы и производительность. Бесплатно.
Компоненты и JSX
12function App() { return <h1>Hi</h1>; }
Функциональный компонент, возвращающий JSX
export default function App() {}
Экспортировать компонент по умолчанию
<Greeting name="Ada" />
Отрисовать компонент с пропсами
{1 + 2} or {user.name}
Встроить JS-выражение в фигурных скобках
<>{a}{b}</>
Fragment группирует узлы без лишнего DOM
<div className="card">
Использовать className, а не class, для CSS
{isOpen && <Menu />}
Отрисовать условно через &&
{ok ? <Yes /> : <No />}
Выбрать между узлами тернарным оператором
{items.map(i => <li key={i.id}>{i.t}</li>)}
Отрисовать список из массива
function Btn({ label, onClick }) {}
Деструктурировать пропсы в сигнатуре
function Card({ children }) { return children; }
Читать вложенный JSX через проп children
<input value={v} onChange={onChange} />
Управляемое поле, связанное с состоянием
Рендеринг и настройка
10import { createRoot } from 'react-dom/client'
Импортировать клиентский root API
createRoot(document.getElementById('root')).render(<App/>)
Смонтировать приложение в DOM
import { StrictMode } from 'react'
Импортировать обёртку StrictMode
<StrictMode><App /></StrictMode>
Выявлять ошибки в разработке
import { hydrateRoot } from 'react-dom/client'
Импортировать API гидратации
hydrateRoot(el, <App />)
Прикрепить React к серверному HTML
root.unmount()
Демонтировать смонтированный root
import App from './App.jsx'
Импортировать компонент из модуля
<App {...props} />
Раскрыть объект как пропсы
export { Button, Card }
Именованный экспорт нескольких компонентов
Состояние и эффекты
12const [count, setCount] = useState(0)
Объявить переменную состояния
setCount(c => c + 1)
Обновить на основе предыдущего значения
setUser(u => ({ ...u, name }))
Обновить объект состояния иммутабельно
useEffect(() => { run(); }, [dep])
Выполнить эффект при изменении зависимостей
useEffect(() => { /* once */ }, [])
Выполнить эффект только при монтировании
useEffect(() => () => cleanup(), [])
Вернуть функцию очистки
const ref = useRef(null)
Хранить изменяемое значение между рендерами
const [state, dispatch] = useReducer(r, init)
Управлять сложным состоянием через reducer
const theme = useContext(ThemeContext)
Прочитать ближайшее значение контекста
const memo = useMemo(() => calc(a), [a])
Мемоизировать дорогое вычисление
useLayoutEffect(() => {}, [])
Выполнить синхронно после раскладки
useSyncExternalStore(sub, get)
Подписаться на внешнее хранилище
Хуки и API React 19
12import { use } from 'react'
Импортировать новый API use
const data = use(promise)
Читать промис, приостанавливая до готовности
const theme = use(ThemeContext)
Читать контекст, допустимо условно
const [state, action, pending] = useActionState(fn, init)
Отслеживать состояние, действие и ожидание
const [opt, addOpt] = useOptimistic(state, reducer)
Сразу показать оптимистичное значение
const { pending } = useFormStatus()
Читать статус отправки родительской формы
const [isPending, startTransition] = useTransition()
Пометить обновления как несрочные
startTransition(async () => await save())
Выполнить асинхронное Action в transition
const deferred = useDeferredValue(value)
Отложить значение для отзывчивого UI
const id = useId()
Сгенерировать стабильный уникальный id
<title>Page title</title>
Отрисовать метаданные в любом месте дерева
function Input({ ref }) {}
ref — обычный проп, без forwardRef
Формы и Actions
12<form action={handleSubmit}>
Передать функцию как Action формы
function handleSubmit(formData) {}
Action получает FormData
formData.get('email')
Прочитать поле из FormData
const [state, action] = useActionState(submit, null)
Связать Action с состоянием компонента
<form action={action}>
Использовать обёрнутый Action на форме
const [s, a, pending] = useActionState(fn, init)
Предоставить флаг ожидания для UI
return { error: 'Invalid' }
Вернуть состояние ошибки из Action
function Submit() { const { pending } = useFormStatus() }
Читать pending внутри кнопки отправки
<button disabled={pending}>Save</button>
Отключить отправку во время ожидания
import { requestFormReset } from 'react-dom'
Импортировать помощник сброса формы
requestFormReset(formEl)
Сбросить неуправляемую форму
<form action={action}><Submit /></form>
Скомпоновать форму с Action и статусом
Пропсы и композиция
10function Hi({ name = 'Guest' }) {}
Проп по умолчанию через деструктуризацию
function Box({ children }) { return children; }
Обернуть контент пропом children
<Box><p>Inside</p></Box>
Передать JSX как children
function List({ render }) { return render(); }
Паттерн render prop
<List render={() => <Item />} />
Передать функцию отрисовки
<Input {...props} />
Передать все пропсы через spread
const { id, ...rest } = props
Выбрать проп и передать остальные
<Avatar {...rest} size="lg" />
Раскрыть, затем переопределить проп
function Btn(props: BtnProps) {}
Типизировать пропсы интерфейсами TypeScript
<Slot label={<b>Hi</b>} />
Передать JSX через именованный проп
События
10<button onClick={handleClick}>
Назначить обработчик клика
function handleClick(e) {}
Получить синтетическое событие
<input onChange={e => set(e.target.value)} />
Читать значение поля при изменении
<form onSubmit={e => e.preventDefault()}>
Отменить отправку формы по умолчанию
e.stopPropagation()
Предотвратить всплытие события
<li onClick={() => remove(id)}>
Передать аргументы через замыкание
<input onKeyDown={e => e.key === 'Enter'}
Обработать нажатие конкретной клавиши
<div onMouseEnter={hover}>
Слушать события указателя
e.currentTarget.value
Прочитать элемент, на котором обработчик
<button onClick={() => {}} type="button">
Избегать неявной отправки формы
Списки и ключи
10arr.map(x => <li key={x.id}>{x.t}</li>)
Отрисовать по одному узлу на элемент
key={item.id}
Дать каждому элементу стабильный key
key={index}
Индексные ключи только для статических списков
users.map(u => <Card key={u.id} {...u} />)
Раскрыть поля элемента как пропсы
{list.length === 0 && <Empty />}
Показать запасной вариант для пустых списков
import { Fragment } from 'react'
Импортировать Fragment для групп с ключами
<Fragment key={id}>{a}{b}</Fragment>
Fragment с ключом в списке
{rows.filter(r => r.on).map(...)}
Фильтровать перед map
Keys must be unique among siblings
Почему ключи помогают React сравнивать списки
{[...Array(n)].map((_, i) => ...)}
Пройти map по диапазону фиксированной длины
Контекст
10const ThemeContext = createContext('light')
Создать контекст со значением по умолчанию
import { createContext } from 'react'
Импортировать фабрику контекста
<ThemeContext value={theme}>
Передать значение (синтаксис React 19)
<ThemeContext value={theme}><App /></ThemeContext>
Обернуть дерево, читающее его
const theme = useContext(ThemeContext)
Читать контекст через useContext
const theme = use(ThemeContext)
Читать контекст через API use
if (cond) { const t = use(Ctx); }
use может читать контекст условно
export const ThemeContext = createContext()
Экспортировать общий контекст
<Ctx value={{ user, setUser }}>
Передать объект как значение
Avoid new objects each render
Мемоизировать значения для меньшего числа ре-рендеров
Ссылки (refs)
10const inputRef = useRef(null)
Создать держатель ref
<input ref={inputRef} />
Прикрепить ref к узлу
inputRef.current.focus()
Обратиться к DOM-узлу через current
function Field({ ref }) { return <input ref={ref} /> }
ref как проп, без forwardRef
<Field ref={inputRef} />
Передать ref компоненту
useImperativeHandle(ref, () => ({ focus }))
Предоставить императивный API
const setRef = node => { box = node; }
Использовать callback-ref
<div ref={setRef} />
Прикрепить callback-ref
const count = useRef(0)
Хранить значение без ре-рендера
ref={node => { return () => cleanup(); }}
Callback-ref с очисткой (React 19)
Производительность
10const Memo = memo(Component)
Пропустить ре-рендер при равных пропсах
import { memo } from 'react'
Импортировать помощник memo
const value = useMemo(() => calc(a), [a])
Кэшировать вычисленное значение
const fn = useCallback(() => f(a), [a])
Кэшировать идентичность функции
const Lazy = lazy(() => import('./Big.jsx'))
Разделить компонент по коду (code-split)
import { lazy, Suspense } from 'react'
Импортировать lazy и Suspense
<Suspense fallback={<Spin />}><Lazy /></Suspense>
Показать запасной вариант при загрузке
startTransition(() => setQuery(q))
Пометить несрочные обновления состояния
const slow = useDeferredValue(query)
Отложить дорогой производный UI
React Compiler auto-memoizes
Часто избавляет от ручной мемоизации
Прочее и метаданные
10<Suspense fallback={<Loading />}>
Граница для асинхронного контента
class ErrorBoundary extends Component {}
Перехват ошибок рендера (устаревший класс)
<title>My Page</title>
Поднять заголовок документа из компонента
<meta name="description" content="..." />
Отрисовать мета-теги в head
<link rel="stylesheet" href="..." />
Поднять ссылку на таблицу стилей
<Comp key={id} />
Сменить key для перемонтирования компонента
React.lazy(() => import('./Page.jsx'))
Лениво импортировать компонент маршрута
createPortal(node, container)
Отрисовать в другой DOM-узел
{/* a comment */}
Написать комментарий внутри JSX
cleanup return in useEffect
Всегда освобождать подписки/таймеры
Нет записей, соответствующих «:q».
Нужна помощь?
Возникла проблема с этим инструментом? Сообщите нам.