⚛️ При изучении React мне больше всего пришлось столкнуться с проблемой разделения задач.

Вот пример того, как можно отделить бизнес-логику от пользовательского интерфейса в React

✍️ @React_lib

⚛️ Совет по React💡

Как сделать интерактивные HTML-узлы доступными для родительских компонентов с помощью хука useImperativeHandle.

✍️ @React_lib

Master React in 5 Days: Become a React Expert in Under a Week
Автор: Eric Sarrion (2023)

Погрузитесь в ускоренный метод обучения, который позволит вам добиться гигантских успехов. Главы тщательно продуманы, чтобы научить вас основным понятиям React, таким как компоненты, реквизиты, состояние, события, жизненный цикл и хуки, не тратя время на сложные объяснения. Благодаря ясному и доступному стилю изложения вы сможете погрузиться в тонкости React с первой страницы. Примеры кода сопровождаются подробными пояснениями, что позволяет быстро разобраться в тонкостях этой технологии. Вы будете создавать приложения на основе React, закрепляя полученные знания и навыки.

✍️ @React_lib

⚛️ Напишите лучшее и безопасное условие с помощью сопоставления паттернов

✍️ @React_lib

Как работает React

Это глубокое погружение во внутреннее устройство react с целью объяснить, какие концепции были заложены в то, чтобы сделать react тем инструментом, который вы используете уже несколько лет.

Это не курс или учебник по использованию React, а скорее объяснение кодовой базы React. Вам не нужно знать ничего из этого, чтобы стать творческим и успешным разработчиком React.

Цель этого проекта - объяснить, как все это создается, какие концепции используются и какие важные «пути кода» следует упомянуть.

https://incepter.github.io/how-react-works/docs/intro/

✍️ @React_lib

⚛️ Совет по React + JavaScript: guard clauses и early return

- Делает код более читабельным
- Позволяет избежать вложенных операторов if
- Создает natural flow

✍️ @React_lib

⚛️ Шпаргалка по UseEffect

❌ Думать об useEffect как о методе жизненного цикла.

✅ Думаем об useEffect как о механизме синхронизации данных (state/props) с системами, которые не контролируются React.

✍️ @React_lib

❌ Избегайте использования useState() для сложного управления состоянием в React

✅ Вместо этого используйте useReducer:

1. Предсказуемые переходы состояний
2. Легче тестировать
3. Лучше масштабируется

✍️ @React_lib

⚛️ Совет по React💡

Используйте пользовательский хук для обработки состояний массива в ваших компонентах

✍️ @React_lib

❌ Избегайте бесконечного вложения провайдеров в React.

✅ Вместо этого объедините все ваши провайдеры с помощью композиции.

✍️ @React_lib

⚛️ State relocation - один из самых простых способов избежать ненужного рендеринга компонентов

✍️ @React_lib

⚛️ Я собрал визуализацию того, как работает процесс рендеринга в React

Надеюсь, она поможет вам понять этот процесс и позволит лучше предсказывать и контролировать изменения UI.

Trigger → Render → Commit

✍️ @React_lib

⚛️ Использование выводимых типов в React с Typescript

✍️ @React_lib

⚛️ Как избежать ненужных useEffects в React

✍️ @React_lib

⚛️ Основные различия между useMemo() и useCallback в React

✍️ @React_lib

⚛️ Простой пример того, как можно использовать композицию, чтобы избежать prop drilling в React ↓

✍️ @React_lib

Коварные утечки памяти в React: как можно обжечься на useCallback и замыканиях

Я работаю в Ramblr, это ИИ-стартап, где мы строим на React сложные приложения для аннотирования видео. Недавно мне попалась сложная утечка памяти, которая возникает при одновременном использовании замыканий JavaScript и хука useCallback в React. Поскольку я вырос на .NET, мне потребовалось немало времени, чтобы разобраться в происходящем. Поэтому я решил написать этот пост и рассказать вам, чему меня научила эта ситуация.

Сначала я кратко напомню вам, как устроены замыкания, но можете смело пропустить этот раздел, если вы уже хорошо знаете, как устроен этот механизм в JavaScript.

https://schiener.io/2024-03-03/react-closures

✍️ @React_lib

Один день из жизни инженера-программиста react native 😀

✍️ @React_lib

Совет по React-query 💡

Вам не нужно возиться с обработкой ошибок в каждом запросе.

Вместо этого вы можете автоматически вернуться к ближайшей границе ошибок, если какой-либо запрос не выполнился, с помощью одной глобальной настройки.

Как? Включите глобальную настройку useErrorBoundary при объявлении QueryClient.

#react

✍️ @React_lib

Как создать библиотеку React components ESM+CJS

ПРИМЕЧАНИЕ: Эта статья посвящена техническим аспектам создания и публикации пакетов и предполагает, что вы уже знаете, как создавать компоненты React. Если вы не знакомы с React, я рекомендую сначала прочитать официальную документацию.

Создание (и публикация) хороших, небольших и простых в использовании библиотек немного сложнее, чем просто написание красивого, модульного и многократно используемого кода. Каждый язык и экосистема имеют свои особенности, в нашем случае мы сосредоточимся на экосистемах JavaScript и TypeScript, делая особый акцент на фронтенд-разработке.

https://blog.coderspirit.xyz/blog/2023/09/15/create-a-react-component-lib/

#react

✍️ @React_lib

⚛️ Список из 4 ошибок React, которые совершает большинство разработчиков

Как вы думаете, какая из них самая распространенная?

#react

✍️ @React_lib