Лучшие практики кода на 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), конец стрима