✨React-bits

Коллекция паттернов, антипаттернов, советов и полезных ресурсов для React-разработчиков.

https://github.com/vasanthk/react-bits

✍️ @React_lib

Работа с ошибками как профессионал в TypeScript

Обработка ошибок в Type/JavaScript - это тема, которой не уделяется должного внимания. Для долговечности любого проекта очень важно отлавливать и регистрировать ошибки.

С годами, когда я начал больше работать с TypeScript, я начал понимать, что не совсем понимаю обработку ошибок. Я часто сталкивался с этой проблемой:

https://engineering.udacity.com/handling-errors-like-a-pro-in-typescript-d7a314ad4991

✍️ @React_lib

The Easiest React Hook

00:00 - Introduction
00:30 - Why this hook is needed
02:25 - How to use the useId hook
04:03 - querySelector gotcha
05:08 - How to use the useId hook with multiple ids

✍️ @React_lib

The Best React Design Patterns You Should Know About

https://www.uxpin.com/studio/blog/react-design-patterns

✍️ @React_lib

React re-renders guide: everything, all at once

https://www.developerway.com/posts/react-re-renders-guide

✍️ @React_lib

Использование шаблонов проектирования группы GoF в React

В этой статье поговорим о том, как написать в React многократно используемый код, используя три шаблона проектирования группы Gang-of-Four.

Rus https://habr.com/ru/company/rshb/blog/680770/

Eng https://blog.bitsrc.io/using-gof-design-patterns-with-react-c334f3ea3147

✍️ @React_lib

8 Mistakes every junior React developer makes

https://kusham1998.medium.com/8-mistakes-every-junior-react-developer-makes-7ceace725d36

✍️ @React_lib

React: полное руководство по повторному рендерингу

https://www.developerway.com/posts/react-re-renders-guide

✍️ @React_lib

Avoiding useEffect with callback refs

https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs

✍️ @React_lib

Learn React Router v6 In 45 Minutes

00:00 - Introduction
00:45 - Basics
06:18 - Router Types
10:22 - Dynamic Routes
13:40 - Route Specificity
16:46 - Nested Routes
28:54 - useRoutes Hooks
30:32 - Link Component
32:50 - NavLink Component
35:57 - Navigate Component
36:39 - useNavigate Hook
39:07 - Search Parameters
43:16 - Navigation State

✍️ @React_lib

Understanding useMemo and useCallback

https://www.joshwcomeau.com/react/usememo-and-usecallback/

✍️ @React_lib

The Ultimate Form Abstraction

https://www.brendonovich.dev/blog/the-ultimate-form-abstraction

✍️ @React_lib

Data Fetching With Suspense In React

https://blog.openreplay.com/data-fetching-with-suspense-in-react/

✍️ @React_lib

Все, что вам необходимо знать о конкурентном рендеринге

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

Чтобы использовать конкурентный рендеринг, необходимо использовать API, такие как переходы - useTransition или startTransition, а также отложенные значения - useDeferredValue. Эти API помогают пометить обновления стейта с низким приоритетом. Обновления стейта, которые объявляются вне функциональностей конкурентного рендеринга, помечаются как обновления с высоким приоритетом.

Энрике Юджи подробно изучил API конкурентного рендеринга и описал экстремальные случаи использования. Например, важно понимать, что React рендерит в однопоточной среде. Если он начал рендерить компонент, то он будет рендерить его до конца без прерываний. Только по окончании рендеринга компонента React проверит, есть ли какая-либо задача с высоким приоритетом в пуле задач. В результате, следует избегать задач, которые интенсивно используют процессор и выполняются в рамках одного компонента, а не распределены по нескольким компонентам.


https://blog.codeminer42.com/everything-you-need-to-know-about-concurrent-react-with-a-little-bit-of-suspense/

✍️ @React_lib

Ключ к хорошему дизайну компонентов - эгоизм

При разработке новой функции, что определяет, будет ли существующий компонент работать или нет? И когда компонент не работает, что именно это означает?

Не работает компонент функционально так, как ожидается, например, система вкладок, которая не переключается на правильную панель? Или он слишком жесткий для поддержки заданного контента, например, кнопка с иконкой после контента вместо перед ним? Или, возможно, он слишком предопределен и структурирован, чтобы поддерживать небольшое отклонение, например, модальное окно, которое всегда имело заголовок, теперь требует варианта без него?

https://www.smashingmagazine.com/2023/01/key-good-component-design-selfishness/

✍️ @React_lib

⚡️React Performance Optimization: useMemo vs useCallback

https://dev.to/ahmedgmurtaza/react-performance-optimization-usememo-vs-usecallback-2p2a

✍️ @React_lib

useSyncExternalStore - The underrated React API

https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api

✍️ @React_lib

React.js: Документальный фильм

React - это одна из самых популярных библиотек, используемых сегодня. Учитывая, что она была создана в таком гиганте, как Facebook, можно предположить, что она всегда была обречена на успех.

А что если мы скажем вам, что первое знакомство React с публичной сферой было совсем не гламурным? Документальный фильм React.js: The Documentary расскажет вам полную историю ранних дней React, сосредоточившись на преданной группе разработчиков, которые помогли вывести его на мировую арену. Эту историю рассказывает звездный состав разработчиков, таких как Том Оккино, Кристофер Чедо, Пит Хант, Себастьян Маркбоге, Дэн Абрамов и многие другие.

Загляните на сайт cult.honeypot.io, где собраны нерассказанные истории разработчиков, связанные с открытым исходным кодом, карьерой и другими интересными вещами, которыми занимаются разработчики.

Honeypot - это платформа для трудоустройства разработчиков, цель которой - обеспечить разработчиков отличной работой. Хотите увидеть, что мы собой представляем? Посетите сайт honeypot.io, чтобы найти работу по душе.

источник

✍️ @React_lib

Как уменьшить размер компонента React: 3 профессиональных приема

В процессе работы многие фрагменты кода увеличиваются настолько, что над ними легко потерять контроль. Речь идет о компонентах React. Обрастание компонента множеством функций, JSX и конфигураций становится одной из главных проблем для тех, кто начинает изучать React. Рассмотрим, как ее избежать.

https://levelup.gitconnected.com/top-3-react-tricks-pros-like-to-use-to-reduce-the-size-of-component-980900370505

✍️ @React_lib