React

⚛️ Совет по React: Если вам нужно импортировать серверный компонент в клиентском компоненте, передайте его как prop (children) ↓ #react ✍️ @React_lib

⚛️ Совет по React: Используйте кастомный хук для управления состояниями массивов в ваших компонентах. #react ✍️ @React_lib

⚛️ Как работает процесс рендеринга в React #react ✍️ @React_lib

‼️Тест по React JS от OTUS — Ответьте на 30 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js по спец. цене! 👉ПРОЙТИ ТЕСТ - https://vk.cc/czLjo4 Курс доступен в рассрочку. ❇️ Пройдите тест и получите: ✔️ Живое общение с экспертами ✔️Получите видео-курс по Git в подарок ✔️ Лучшие открытые уроки прошлых наборов курса ✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+ ✔️ Скидку на прохождение онлайн курса «React.js Developer» Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

⚛️ Знаете ли вы, как и когда использовать flushSync в React? Используйте flushSync, чтобы принудительно выполнить немедленный рендеринг обновлений, обходя обычную пакетную отрисовку. Полезно при интеграции с сторонним кодом, таким как браузерные API или UI-библиотеки. #react ✍️ @React_lib

⚛️ Как типизировать обобщенные компоненты в React с помощью TypeScript #react ✍️ @React_lib

⚛️ React useEffect vs useLayoutEffect #react ✍️ @React_lib

⚛️ Знали ли вы, что можно использовать пересечение типов для легкого расширения нативных свойств элементов в React #react ✍️ @React_lib

❓Хотите узнать, как эффективно управлять состоянием в React.js с помощью хуков useState и useReducer? Ждем вас на открытом вебинаре 20 августа в 19:00 мск, где мы разберём: - основы управления состоянием в React.js с помощью хуков useState и useReducer; - различия и преимущества использования useState и useReducer; - практические примеры применения хуков для управления состоянием в реальных приложениях. Урок будет полезен как новичкам, знакомым с базовыми концепциями React, так и опытным разработчикам, которые хотят улучшить свои навыки управления состоянием. Встречаемся в преддверии старта курса «React.js Developer». Все участники вебинара получат специальную цену на обучение! 👉 Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://vk.cc/czugnB Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

⚛️ Как правильно использовать useCallback в React #react ✍️ @React_lib

Полиморфизм в React: 2 паттерна, которые нужно знать Независимо от того, создаете ли вы библиотеку или разрабатываете React-компоненты для своих нужд, есть один прием, который вам необходимо знать: полиморфизм. Это когда один элемент может принимать несколько форм, например, когда кнопка может выступать в роли ссылки. При правильном использовании это может избавить вас от необходимости поддерживать множество вариантов компонентов, одновременно предоставляя пользователям необходимую гибкость. В этом тексте я покажу вам, как использовать два наиболее известных способа реализации полиморфизма в React: паттерны "as" и "asChild". https://www.bekk.christmas/post/2023/1/polymorphism-in-react #react ✍️ @React_lib

Дублирование JSX - верный признак того, что вам нужно создать компонент. Дублирование логики в компонентах - верный признак того, что вам, возможно, нужно создать пользовательский хук. Обратите внимание на слово *может* #react ✍️ @React_lib

⚛️ useEffect становится проще в React, когда вы перестаете использовать его для: 1. Выведения/вычисления нового состояния. 2. Инициализации состояния на основе props. 3. Получения данных. Вместо этого: 1. Делайте это в рендере. 2. Инициализируйте состояние в useState. 3. Используйте либо обработчики событий, либо react-query для этого. #react ✍️ @React_lib

⚛️ Быстрый совет по React ❌ Преобразование данных в useEffect. ✅ Делаем это во время рендеринга ↓ #react ✍️ @React_lib

❓React-компоненты работают медленно и требуют оптимизации? Хотите узнать, как сделать их быстрыми и эффективными? Ждем вас на открытом вебинаре «Оптимизация работы компонентов в React.js» 6 августа в 19:00 мск, где мы разберём: - как работать с оптимизацией в React.js; - особенности работы функциональных компонентов и хуков; - трюк с мемоизацией коллбеков для списка элементов. Урок будет полезен как начинающим разработчикам React, так и опытным специалистам, которые хотят глубже изучить процесс мемоизации. Встречаемся в рамках курса «React.js Developer». Все участники вебинара получат специальную цену на обучение! 👉 Регистрация открыта: https://otus.pw/AXnVY/?erid=2VtzqwfLhcF Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

⚛️ Как сделать контекстно-ориентированные хуки для запросов в React #react ✍️ @React_lib

useTransition в React #react ✍️ @React_lib

Самый быстрый способ передачи state в JavaScript В приложениях Redux с серверным рендерингом часто приходится передавать state магазина с сервера на клиент. Передача больших state может быть медленной, поэтому в 2019 году Хенрик Йоретаг провел бенчмаркинг трех подходов, чтобы определить наиболее производительный способ:

// "Plain object":
window.__STATE__ = {"foo":"bar"}

// "Invalid mime type":
<script type="mime/invalid" id="myState">{"foo":"bar"}</script>
window.__STATE__ = JSON.parse(window.myState.innerHTML)

// "Just parse":
window.__STATE__ = JSON.parse("{\"foo\":\"bar\"}")

https://calendar.perfplanet.com/2023/fastest-way-passing-state-javascript-revisited/ #react ✍️ @React_lib

⚛️ Совет React 💡 Используйте строковые литералы + тип union в typescript для указания точных строковых значений в props #react ✍️ @React_lib

⚛️ Совет по React + Typescript Вы можете использовать `typeof` для типизации предполагаемых типов #react ✍️ @React_lib