⚛️ Я собрал визуализацию того, как работает процесс рендеринга в 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

Типы событий в React и TypeScript

При работе с React и TypeScript вы часто сталкиваетесь с подобной ошибкой:

const onChange = (e) => {};
Parameter 'e' implicitly has an 'any' type.
<input onChange={onChange} />;

Не всегда понятно, какой тип следует присвоить элементу e внутри функции onChange.
Это может произойти с onClick, onSubmit или любым другим обработчиком событий, которые получают элементы DOM.
К счастью, есть несколько решений:

https://www.totaltypescript.com/event-types-in-react-and-typescript

#react

✍️ @React_lib

Довольно круто, что архитектура React Fiber позволяет избежать переполнения стека

Этот рекурсивный компонент обычно переполняется
«Maximum call stack size exceeded».

После этого PR он больше не будет переполняться

#react

✍️ @React_lib

⚛️ Совет по React + Typescript

Вы можете использовать `typeof` для типизации предполагаемых типов

#react

✍️ @React_lib

⚛️ Совет React 💡

Используйте строковые литералы + тип union в typescript для указания точных строковых значений в props

#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

useTransition в React

#react

✍️ @React_lib

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

#react

✍️ @React_lib

⚛️ Быстрый совет по React

❌ Преобразование данных в useEffect.

✅ Делаем это во время рендеринга ↓

#react

✍️ @React_lib

⚛️ useEffect становится проще в React, когда вы перестаете использовать его для:

1. Выведения/вычисления нового состояния.
2. Инициализации состояния на основе props.
3. Получения данных.

Вместо этого:
1. Делайте это в рендере.
2. Инициализируйте состояние в useState.
3. Используйте либо обработчики событий, либо react-query для этого.

#react

✍️ @React_lib

Дублирование JSX - верный признак того, что вам нужно создать компонент.

Дублирование логики в компонентах - верный признак того, что вам, возможно, нужно создать пользовательский хук.

Обратите внимание на слово *может*

#react

✍️ @React_lib

Полиморфизм в React: 2 паттерна, которые нужно знать

Независимо от того, создаете ли вы библиотеку или разрабатываете React-компоненты для своих нужд, есть один прием, который вам необходимо знать: полиморфизм. Это когда один элемент может принимать несколько форм, например, когда кнопка может выступать в роли ссылки. При правильном использовании это может избавить вас от необходимости поддерживать множество вариантов компонентов, одновременно предоставляя пользователям необходимую гибкость.

В этом тексте я покажу вам, как использовать два наиболее известных способа реализации полиморфизма в React: паттерны "as" и "asChild".

https://www.bekk.christmas/post/2023/1/polymorphism-in-react

#react

✍️ @React_lib