React 18 ввёл конкурентный рендеринг и новые хуки: useTransition и useDeferredValue для приоритизации обновлений, useSyncExternalStore и useInsertionEffect для библиотек, useId для безопасных id при SSR.
Дебаунс задерживает вызов поиска до паузы ввода, снижая число запросов и нагрузку на сервер. В React нужно мемоизировать debounce и отменять таймеры при размонтировании.
TanStack Query (ранее React Query) упрощает загрузку, кеширование и обновление данных в React‑приложениях. Установите библиотеку, оберните приложение в QueryClientProvider, используйте useQuery для получения и useMutation для изменения данных; настройте staleTime, cacheTime и стратегии ошибок.
Swiper — лёгкая и мощная библиотека для создания свайп-панелей в React. В статье — установка, базовая реализация, модули (Navigation, Autoplay, Pagination), рекомендации по доступности, тестированию и интеграции в проект.
Храните состояние там, где оно используется: локальный state делает компоненты автономными и проще. Поднимайте состояние или используйте Context/Redux только если данные реально разделяются между компонентами.
Moment.js предоставляет простой API для форматирования, парсинга и манипуляции дат в приложениях React. Для международных приложений учитывайте локализацию и подумайте об альтернативных библиотеках при требованиях к размеру сборки или современным возможностям.
try...catch в Redux-Saga позволяет уверенно ловить ошибки в генераторах и управлять состоянием приложения через dispatch действий успеха/ошибки. Используйте try...catch для API-вызовов, добавляйте централизованную обработку, логирование и понятные сообщения пользователю; рассмотрите альтернативы и добавьте критерии приёмки и чек-листы для команды.
React Hook Form — лёгкая и производительная библиотека для создания форм в React. Она упрощает регистрацию полей, валидацию и обработку ошибок, повышает производительность за счёт минимизации перерендеров.
Рассмотрим два способа перенаправления в React Router v6 — декларативный компонент Navigate и императивный хук useNavigate. Поясню, как защитить маршрут (dashboard), вернуть пользователя на исходную страницу после логина и какие подходы подходят для продакшена.
Хук use() упрощает загрузку данных, работая в связке с Suspense и Error Boundary. Он экспериментален — используйте его после проверки и с планом отката.
Props — это входные параметры React‑компонентов, которые передают данные от родителя к дочерним компонентам. Статья показывает, как использовать props, задавать defaultProps, проверять типы через PropTypes и когда применять альтернативы.
Перетаскивание в React можно реализовать либо на нативном HTML5‑API (с событиями onDrag/onDrop и dataTransfer), либо с помощью библиотек (react-dnd, react-beautiful-dnd, dnd-kit и т.д.). Нативный подход даёт простую гибкость для одиночных элементов; библиотеки упрощают сложные сценарии (сортировка списков, анимации, доступность).
Это практическое руководство показывает, как создать простое приложение — счётчик — на React с увеличением, уменьшением и сбросом значения. Приведены рабочие примеры кода, рекомендации по архитектуре, варианты реализации (useState, useReducer, TypeScript), чек-листы для разработчика и проверяющего, а также типичные ошибки и способы их исправления.
В статье показано, как реализовать простую систему защищённых маршрутов в React с помощью react-router-dom и компонента-обёртки Protected. Приведены альтернативы (HOC, context, кастомный хук), рекомендации по роли-based доступу и практические чек-листы безопасности и тестирования.
React может реиспользовать один и тот же компонент при условном рендеринге, сохраняя его локальное состояние. Дайте разный key или измените структуру DOM, чтобы заставить React создать новый компонент и сбросить состояние.
В React props — это способ передавать данные и обработчики из родителя в дочерние компоненты. Защитите контракт компонента с помощью PropTypes или TypeScript и используйте Context/Redux при проблемах с пробросом props.
use() — экспериментальный хук React, который позволяет напрямую ожидать Promise внутри компонента и убирает boilerplate для загрузки данных. Используйте его вместе с Suspense и Error Boundary; учтите experimental‑статус и особенности SSR.
В статье показано, как реализовать генератор QR‑кодов в React с библиотекой qrcode: установка, компонент с Data URL, скачивание и рекомендации по безопасности.
В этой статье показано, как создать фронтенд-клиент Hacker News на React: настройка проекта, useFetch для двух API, страницы списка и поста с рекурсивными комментариями.
Условный рендеринг в React — это набор приёмов для показа разных элементов или компонентов в зависимости от состояния приложения. В статье описаны основные способы (if/else, тернарный оператор, переменные элементов, логические операторы, возвращение null), реальные примеры и рекомендации.