Лучшие практики кода на React JS от Vercel. Часть 2

Описание: 👨🏼‍💻 ТГ Канал: https://t.me/+9XtDDNBdHAk4Yjhi

Программы ВебКадеми:
📦 HTML верстальщик: https://webcademy.ru/htmlstart
🛠️ Frontend разработчик: https://webcademy.ru/frontend
🐘 Разработка сайтов на PHP: https://webcademy.ru/phpcourse/

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

🌍 Сайт ВебКадеми: https://webcademy.ru

ТАЙМ КОДЫ:

00:00 Начало стрима
00:44 Проблема с чатом и комментариями, проверка трансляции (YouTube/ВК)
02:47 Чат появился, приветствие, проверка связи
04:00 Полноценный старт, кто ведущий, о чём стрим
04:30 Контекст: Part 1, что за React best practices от Vercel, формат правил (anti-pattern vs good)
05:24 GitHub репозиторий, папка Rules, сколько правил, план на стрим
06:17 Небольшой интро/разговор, переход к началу разбора
06:44 Коротко про школу/курсы (вёрстка → фронтенд)
08:49 Переход к правилам, где остановились в прошлый раз
09:26 Client Passive Event Listeners: почему важно для скролла/тача, пример
12:09 passive: true — как влияет на задержку скролла и preventDefault
15:07 Client SWR Dedup: дедупликация запросов, проблема повторных fetch
18:06 SWR/Immutable/Muation: как библиотека шарит запрос и кэш
20:18 Открытие docs/npm SWR, разбор “stale-while-revalidate”
23:08 Как работает SWR: кэш → ревалидация → обновление данных
27:35 Ключ + fetcher в SWR, зачем это нужно
28:13 Batch DOM/CSS: layout thrashing, почему нельзя мешать чтение/запись стилей
30:23 Плохой пример: style set + чтение offsetWidth/offsetHeight → лишние reflow
32:04 Правильный подход: пакетная запись, затем чтение, или CSS-классы
37:16 Cache Function Results: кэширование результатов функций (slugify)
40:03 Map-кэш: has/get/set, как убрать повторные вычисления
44:01 Cache Property Access: кэшировать доступ к вложенным свойствам в “горячих” циклах
48:54 Cache Storage: кэширование localStorage, чтобы не читать при каждом вызове
52:08 Инвалидация кэша: storage event, visibilitychange (когда чистить)
53:41 Combine Iterations: объединить несколько filter/map в один проход
56:33 Early Exit: ранний возврат из функции при ошибках валидации
1:00:14 RegExp Hoisting: не создавать RegExp на каждом рендере (вынести/мемоизировать)
1:04:14 Проверка длины массивов перед дорогим сравнением (length fast-path)
1:08:31 Min/Max без sort: один проход вместо сортировки массива
1:15:20 Ограничения spread при Math.min/Math.max на больших массивах
1:18:00 Set/Map lookups: преобразование массива в Set/Map для частых includes
1:20:20 toSorted вместо sort: не мутировать props/состояние в React
1:23:00 React Activity: сохранять состояние/DOM для часто скрываемых компонентов
1:26:24 Обсуждение больших массивов (124k элементов) — где бывает на фронте
1:27:01 Анимация SVG: лучше анимировать wrapper (div), чтобы работало GPU ускорение
1:29:11 Условный рендеринг: опасность && с 0 (может отрендерить “0”)
1:31:02 CSS content-visibility: ускорение длинных списков (рендер только видимого)
1:36:24 Static JSX: выносить статичную JSX-разметку в константу (не пересоздавать)
1:40:43 Завершение: итоги, планы, благодарности
1:41:15 Реклама курсов/программы, какие проекты делают на обучении
1:42:04 Прощание, где следить за анонсами (Telegram), конец стрима