Особенности событий порталов в React ⚛️ Сегодня продолжаем внимательно читать документацию React. На прошлой неделе пофиксили небольшой баг, который возник из-за особенности всплытия событий при работе с порталами. createPortal Метод createPortal ...

⚛️ State is tied to a position in the render tree Помнится в одном из своих пет проектов у меня был баг — при переходе между страницами у меня не пересоздавался zustand стор из-за чего компонент PersonalStatistic использовал стор компонента CodeRevi...

🤝 Как подружить React.lazy с дефолтным экспортом У нас в проекте используются только именованные экспорты. Почему — писал здесь. Но React.lazy работает только с дефолтными экспортами, и раньше нам приходилось успокаивать eslint, приговаривая // es...

React приложение без сборщиков Иногда нужно набросать небольшой пример или демку на реакте, но не хочется создавать новый проект, где установится +100500 пакетов. Создавать проект в песочнице типа codesandbox тоже лень. Есть вариант попроще: 1️⃣ По...

В прошлом году я каким-то образом умудрился написать 6 статей. В этом же с трудом нашел силы на одну — Как мы мигрируем с JQuery на React. Во время миграции мы столкнулись со многими трудностями, поэтому я решил описать наш подход в виде статьи. Из...

Мемоизация селекторов в Zustand Если вы используете Zustand, то знаете, что computed значения реализуются с помощью селекторов. const userPrs = useChartsStore((state) => { return state.pullRequests.filter(pr => pr.author.id === state.user.id); ...

peerDependencies Недавно делал код ревью и заметил, что в pnpm-lock.yaml (альтернатива yarn.lock в pnpm) добавлена 17-я версия реакта, хотя на проекте мы используем 18-ю. Нам не нужно тянуть в проект 2 версии реакта — поэтому идём разбираться. Дело...

zustand и redux-devtools Я всё ещё пытаюсь доделать свой пет-проект для построения графиков на основе данных из пул реквестов и комментариев. В качестве стейтменеджера использую zustand. Своих девтулзов у него нет, но разработчики реализовали middl...

⚛️ React 19 — use(Promise) use — новый хук, который позволяет считывать данные из промиса и при этом интегрирован с Suspense и ErrorBoundary. ℹ️ Основные моменты: На этот хук не распространяются правила хуков — его можно использовать внутри циклов...

☁️ Облако слов Ради интереса решил построить облако слов на основе комментариев в пул реквестах. Нашёл пару подходящих библиотек: react-tagcloud — нет типов для тайпскрипта, и облако само по себе выглядит не очень красивоreact-wordcloud — типы ест...

⚛️ Атомарные обновления в Zustand Я уже упоминал атомарные обновления ранее, когда говорил о проблемах контекста реакта. Я называю обновления атомарными, если компонент обновляется только тогда, когда изменяются данные, которые он использует. У кон...

​​⚠️ Проблемы React Context Использование контекста реакта и хуков, упрощает управление состоянием приложения. В небольших проектах уж и вовсе позволяет отказаться от использования менеджеров состояний. Но у него есть ряд проблем, о которых необходи...

​​Почему мы выбрали Zustand❓ Как я упомянул в предыдущем посте о Zustand, мы начали его использовать в июне 2021 года. До этого использовали просто useState/useReducer/useContext, поняли что так больше нельзя, и перед разработкой новой большой фичи...

Zustand — очень простая альтернатива Redux и MobX, не сильно сложнее useReducer. В последние пару лет появилось довольно много русскоязычных видео о Zustand. Мы на работе как раз начали его использовать пару лет назад, и в то время, похоже, он был н...

📖 React 18 — useTransition, useDeferredValue React 18 вышел уже почти год назад, но только сейчас решил поискать наглядные примеры использования новых хуков useTransition и useDeferredValue и наткнулся на отличное видео “Новые хуки useTransition и ...

📖Пятничное чтиво - Compound Components Сегодня советы для React разработчиков. Если вы не знаете, что делать со сложными компонентами, пишите сложные рендеры и используете кучу вложенных тернарников, то рекомендую ознакомиться с подходом Compound C...

XSS в React Одним из самых больших преимуществ реакта является его безопасный дизайн, который предотвращает появление большинства XSS (Cross-Site-Scripting) уязвимостей. Может показаться что, если вы используете реакт, то вы в безопасности, ведь: ●...