Оглавление

Номера страниц ниже относятся к оригиналу; ссылки ведут к русским главам в базе знаний. Современные дополнения расположены внутри соответствующих глав и обозначены отдельно.

Введение: как читать эту книгу · стр. 8

01. Введение в повторные рендеры · стр. 10

• Обновление состояния, вложенные компоненты и повторные рендеры

• Главный миф о повторных рендерах

• Перенос состояния вниз

• Опасность пользовательских хуков

02. Элементы, children как props и повторные рендеры · стр. 27

• Элементы, компоненты и повторные рендеры

• Children как props

03. Настройка компонентов с помощью элементов в props · стр. 41

• Элементы в props

• Условный рендеринг и производительность

• Значения по умолчанию для элементов из props

04. Гибкая настройка с помощью render props · стр. 54

• Render props для рендера элементов

• Разделяем логику с состоянием: children как render prop

• Хуки заменили render props

05. Мемоизация с useMemo, useCallback и React.memo · стр. 69

• Проблема: сравнение значений

• Как работают useMemo и useCallback

• Антипаттерн: мемоизация props

• Что такое React.memo

• React.memo и props, полученные из props

• React.memo и children

• React.memo и мемоизированные children — почти

• useMemo и дорогие вычисления

06. Подробно о diffing и reconciliation · стр. 91

• Загадочная ошибка

• Diffing и reconciliation

• Reconciliation и обновление состояния

• Почему нельзя определять компоненты внутри других компонентов

• Разгадка

• Reconciliation и массивы

• Reconciliation и key

• Атрибут key и мемоизированный список

• Приём сброса состояния

• Принудительное переиспользование существующего элемента с помощью key

• Почему ключи не нужны вне массивов?

• Динамические массивы вместе с обычными элементами

07. Компоненты высшего порядка в современном React · стр. 126

• Что такое компонент высшего порядка?

• Расширение обработчиков

• Расширение событий жизненного цикла React

• Перехват событий DOM

08. React Context и производительность · стр. 140

• Как помогает Context

• Изменение значения Context

• Предотвращаем ненужные рендеры Context: разделяем провайдеры

• Reducers и разделённые провайдеры

• Селекторы Context

09. Refs: от хранения данных до императивного API · стр. 165

• Доступ к DOM в React

• Что такое ref?

• Разница между ref и состоянием

• Обновление ref не вызывает повторный рендер

• Обновление ref синхронно и изменяет объект

• Когда же использовать ref?

• Запись DOM-элементов в ref

• Передача ref от родителя ребёнку через prop

• Передача ref через forwardRef

• Императивный API с useImperativeHandle

• Императивный API без useImperativeHandle

10. Замыкания в React · стр. 192

• JavaScript, область видимости и замыкания

• Проблема устаревшего замыкания

• Устаревшие замыкания в React: useCallback

• Устаревшие замыкания в React: refs

• Устаревшие замыкания в React: React.memo

• Обходим ловушку замыкания с помощью refs

11. Продвинутые debounce и throttle с помощью refs · стр. 218

• Что такое debounce и throttle?

• Debounced callback в React: повторные рендеры

• Debounced callback в React: состояние внутри

12. Устраняем мерцание интерфейса с useLayoutEffect · стр. 236

• В чём проблема useEffect?

• Исправляем её с помощью useLayoutEffect

• Почему это работает: рендер, отрисовка и браузер

• Снова о useEffect и useLayoutEffect

• useLayoutEffect в Next.js и других SSR-фреймворках

13. Порталы React: зачем они нужны · стр. 254

• CSS: абсолютное позиционирование

• Абсолютное — не совсем абсолютное

• Разбираемся с контекстом наложения

• Position: fixed — выходим за overflow

• Контекст наложения в реальных приложениях

• Как помогает React Portal

• Жизненный цикл React, повторные рендеры, Context и порталы

• CSS, нативный JavaScript, отправка формы и порталы

14. Загрузка данных на клиенте и производительность · стр. 274

• Виды загрузки данных

• Нужна ли внешняя библиотека для загрузки данных в React?

• Что такое производительное React-приложение?

• Жизненный цикл React и загрузка данных

• Ограничения браузера при загрузке

• Как появляются водопады запросов

• Как устранить водопад запросов

• А что насчёт Suspense?

15. Загрузка данных и гонки запросов · стр. 304

• Что такое Promise?

• Promise и гонки

• Почему возникает гонка

• Исправление: принудительное повторное монтирование

• Исправление: отбрасывание результата для другой страницы

• Исправление: отбрасывание результатов прежних запусков

• Исправление: отмена предыдущих запросов

• Меняет ли что-нибудь async/await?

16. Универсальная обработка ошибок в React · стр. 324

• Почему в React нужно перехватывать ошибки

• Вспоминаем перехват ошибок в JavaScript

• Обычный try/catch в React: применение и ограничения

• Компонент ErrorBoundary в React

• Ограничения ErrorBoundary

• Передаём асинхронные ошибки в ErrorBoundary

• Можно ли просто использовать react-error-boundary?

Послесловие · стр. 342

Сноски и источники книги · стр. 343–346

О названиях. Заголовки отражают историческую структуру книги. Например, раздел о forwardRef сохранён, а в главе 9 отдельно объяснено, что в React 19 ref можно передавать как prop и forwardRef для этого больше не требуется. Обновления API не подменяют исходное оглавление.