⚛️ Совет по 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

Типы событий в 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