Шпаргалка з React
Доступний для пошуку та друку довідник з React 19 — компоненти, JSX, хуки, нові API Actions, контекст, рефи та продуктивність. Безкоштовно.
Компоненти та JSX
12function App() { return <h1>Hi</h1>; }
Функціональний компонент, що повертає JSX
export default function App() {}
Експорт компонента за замовчуванням
<Greeting name="Ada" />
Відрендерити компонент із props
{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 }) {}
Деструктурувати props у сигнатурі
function Card({ children }) { return children; }
Прочитати вкладений JSX через prop 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} />
Розгорнути об'єкт як 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)
Прочитати promise, призупиняє до готовності
const theme = use(ThemeContext)
Прочитати контекст, дозволено умовно
const [state, action, pending] = useActionState(fn, init)
Відстежувати стан, дію та pending
const [opt, addOpt] = useOptimistic(state, reducer)
Миттєво показати оптимістичне значення
const { pending } = useFormStatus()
Прочитати статус надсилання батьківської форми
const [isPending, startTransition] = useTransition()
Позначити оновлення як неспішні
startTransition(async () => await save())
Виконати асинхронну Action у переході
const deferred = useDeferredValue(value)
Відкласти значення для чутливості UI
const id = useId()
Згенерувати стабільний унікальний id
<title>Page title</title>
Рендерити метадані будь-де в дереві
function Input({ ref }) {}
ref — звичайний prop, без 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)
Надати прапор pending для UI
return { error: 'Invalid' }
Повернути стан помилки з Action
function Submit() { const { pending } = useFormStatus() }
Прочитати pending усередині кнопки надсилання
<button disabled={pending}>Save</button>
Вимкнути надсилання під час pending
import { requestFormReset } from 'react-dom'
Імпортувати помічник скидання форми
requestFormReset(formEl)
Скинути некеровану форму
<form action={action}><Submit /></form>
Скомпонувати форму Action зі статусом
Props та композиція
10function Hi({ name = 'Guest' }) {}
Prop за замовчуванням через деструктуризацію
function Box({ children }) { return children; }
Обгорнути вміст prop-ом children
<Box><p>Inside</p></Box>
Передати JSX як children
function List({ render }) { return render(); }
Шаблон render prop
<List render={() => <Item />} />
Надати функцію рендерингу
<Input {...props} />
Переслати всі props через spread
const { id, ...rest } = props
Вибрати prop та передати решту
<Avatar {...rest} size="lg" />
Розгорнути, потім перевизначити prop
function Btn(props: BtnProps) {}
Типізувати props інтерфейсами TypeScript
<Slot label={<b>Hi</b>} />
Передати JSX через іменований prop
Події
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}
Index-ключі лише для статичних списків
users.map(u => <Card key={u.id} {...u} />)
Розгорнути поля елемента як props
{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 як prop, без 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)
Пропустити повторний рендер, коли props рівні
import { memo } from 'react'
Імпортувати помічник memo
const value = useMemo(() => calc(a), [a])
Кешувати обчислене значення
const fn = useCallback(() => f(a), [a])
Кешувати ідентичність функції
const Lazy = lazy(() => import('./Big.jsx'))
Розділити компонент на частини коду
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”.
Потрібна допомога?
Виникла проблема з цим інструментом? Повідомте нас.