🖥 Mode дня — StrictMode

Режим <StrictMode> позволяет находить распространенные ошибки в компонентах на ранних стадиях разработки.
Используйте StrictMode для включения дополнительных поведений разработки и предупреждений для внутреннего дерева компонентов.

Строгий режим включает следующие модели поведения, доступные только для разработчиков:
⏩Ваши компоненты будут перерендериваться дополнительно для поиска ошибок, вызванных нечистым рендерингом.
⏩Ваши компоненты будут перезапускать эффекты дополнительно, чтобы найти ошибки, вызванные отсутствием очистки эффектов.
⏩Ваши компоненты будут проверяться на использование устаревших API.

📎 Читать подробнее

@react_tg

🖥 Все хуки в React

Норм видео о том, какие хуки вообще существуют в природе, и как их можно использовать.

Речь идёт про такие хуки и не только:
• useState() • setState() • useEffect() • useContext() • useReducer() • useCallback() • useMemo() • useRef()

📎 Видео

@react_tg

🖥 Немного о производительность React.js

Преждевременная оптимизация — корень всех зол. ©

Перед тем, как рассуждать о производительности, настоятельно рекомендуется прочитать Optimization.guide.
Для начала стоит вспомнить, что виртуальный DOM — это уже оптимизация, которая позволяет React из коробки работать достаточно быстро, чтобы вы могли вообще не задумываться о производительности долгое время.

В общих чертах, React работает так:
— Монтирование вызывает рендеринг приложения.
— Получившийся DOM вставляется в реальный DOM целиком, так как там еще ничего нет. Виртуальный DOM сохраняется внутри React для последующего обновления.
— Изменение состояния приводит к вычислению нового виртуального DOM.
— Вычисляется разница между старым виртуальным DOM и новым.
— Разница применяется к реальному DOM.


⏩Согласование

Когда происходит изменение в состоянии компонента, запускается механизм «согласование» (reconciliation), который вычисляет разницу между прошлым состоянием и новым. С алгоритмической точки зрения происходит поиск отличий в двух деревьях. В общем случае алгоритм, выполняющий это вычисление, работает со сложностью O(n³).

Для решения этой проблемы React настоятельно просит для всех элементов списков использовать атрибут key, который не меняется для конкретного элемента списка. Подобное требование позволяет оптимизировать работу алгоритма, уменьшив сложность до О(n).


⏩Пропсы по умолчанию

Первая засада ожидает при неправильной работе со свойствами по умолчанию, пример кода на изображении.

Вроде безобидный код, но вызов [] каждый раз генерирует новый объект (при условии что options равен false). Проверяется это легко: [] === [] будет ложным. То есть данные не поменялись, но <Cell> будет отрисован заново.

Вывод: используйте встроенный механизм для свойств по умолчанию.

📎 Читать подробнее

@react_tg

🖥 Хук дня — 'use client'

⏩'use client' позволяет отметить, какой код выполняется на клиенте.
Добавьте 'use client' в верхней части файла, чтобы отметить модуль и его транзитивные зависимости как клиентский код.

⏩Когда файл, помеченный директивой 'use client', импортируется из серверного компонента, совместимые бандлеры будут рассматривать импорт модуля как границу между кодом, выполняемым на сервере, и кодом, выполняемым на клиенте.

⏩Будучи зависимостями RichTextEditor, formatDate и Button также будут оцениваться на клиенте, независимо от того, содержат ли их модули директиву 'use client'. Обратите внимание, что один модуль может оцениваться на сервере при импорте из серверного кода и на клиенте при импорте из клиентского кода.


Некоторые нюансы

⏩'use client' должно находиться в самом начале файла, выше любого импорта или другого кода (комментарии допускаются). Они должны быть написаны с одинарными или двойными кавычками, но не с обратными знаками.

⏩Если модуль 'use client' импортируется из другого клиентского модуля, директива не имеет силы.

⏩Если модуль компонента содержит директиву 'use client', то любое использование этого компонента гарантированно является клиентским компонентом. Однако компонент может быть оценен на клиенте, даже если он не содержит директивы 'use client'.
Дополнение: компонент считается клиентским, если он определен в модуле с директивой 'use client' или является транзитивной зависимостью модуля, содержащего директиву 'use client'. В противном случае он является серверным компонентом.

⏩Код, помеченный для использования клиентом, не ограничивается компонентами. Весь код, входящий в поддерево модулей Client, отправляется клиенту и выполняется им.

⏩Когда модуль, работающий с сервером, импортирует значения из модуля 'use client', эти значения должны быть либо компонентами React, либо поддерживаемыми сериализуемыми значениями prop для передачи в клиентский компонент. При любом другом варианте использования будет возникать исключение.

📎 Читать подробнее

@react_tg

🖥 Создание сложного веб-приложения с помощью React JS и Tailwind

Держите годный контент)
⏩В этом видео описано создание веб-приложения Brainwave с использованием React и Tailwind CSS. Приложение включает в себя различные элементы, реагирующие на курсор, навигационную панель, градиентные границы, схемы и другие элементы.

⏩Что происходит в видео?
00:04:24 — Настройка
00:22:07 — Header
00:44:28 — Компонент раздела оглавления
01:26:00 — Раздел о преимуществах
01:41:30 — Раздел о сотрудничестве
02:30:35 — Раздел о ценах
02:51:30 — Раздел roadmap
03:05:20 — Footer
03:10:10 — Деплой

📎 Кликабельный план видео
📎 Видео

Enjoy)
@react_tg