❌ Избегайте использования нескольких переменных состояния для отслеживания статуса.

✅ Вместо этого используйте перечисления (enums).

✍️ @React_lib

🚀 Хотите создавать современные и отзывчивые веб-приложения на самом популярном JS-фреймворке? Начните с бесплатного вебинара и прокачайте навыки React прямо «здесь и сейчас»!

🗓 28 октября, 20:00 — «Галерея с API и тёмной темой — React зажигает UX»

Что узнают участники:
- Связь React с реальным API и динамическая загрузка данных
- Работа с событиями и хуками для интерактивного интерфейса
- Lazy loading и его влияние на UX
- Как собрать полноценное приложение всего за 1,5 часа

🎯 Для фронтенд-разработчиков и начинающих React-разработчиков, которые хотят оживить интерфейсы и собрать мини-проект для портфолио.

💻 Курс «React.js Developer» - следующий шаг после вебинара:
- Освоите Redux, Redux-Saga, Redux-thunk
- Будете создавать SPA и оптимизировать под production
- Изучите TypeScript и пишете чистый код
- Работаете с GraphQL, Apollo, Relay
- Разбираетесь с Webpack, Babel и паттернами функционального программирования

⚡️ Не упустите шанс - вебинар бесплатный, а курс поможет выйти на уровень middle+ и собирать проекты с реальными API! Регистрируйтесь на вебинар: https://vk.cc/cQnPZ7

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

🚀 Оптимизация React-приложения: 5 техник, которые работают

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

1️⃣ Используйте React.iss.onemo
Если ваш компонент ререндерится без причины, оберните его в React.iss.onemo(). Это предотвратит ненужные перерисовки, если пропсы не изменились.

const OptimizedComponent = React.iss.onemo(({ data }) => {
  return <div>{data}</div>;
});

2️⃣ Оптимизируйте контекст с useMemo и useCallback
Частая ошибка — передача в useContext сложных объектов без мемоизации. Используйте useMemo и useCallback для оптимизации.

const value = useMemo(() => ({ user, logout }), [user]);  

3️⃣ Разбейте состояние на атомарные части
Часто программисты хранят весь стейт в одном useState, но лучше разбить его на части. Так обновление одной переменной не будет вызывать ререндер всего компонента.

const [name, setName] = useState("");  
const [age, setAge] = useState(0);

4️⃣ Динамическая подгрузка компонентов (Code Splitting)
Если у вас большое приложение, используйте React.lazy для загрузки компонентов по требованию.

const LazyComponent = React.lazy(() => import("./BigComponent"));

5️⃣ Используйте производительные списки
Если у вас много элементов (список в 1000+ элементов), используйте виртуализацию, например, react-window или react-virtualized.

import { FixedSizeList as List } from "react-window";

<List height={400} itemCount={items.length} itemSize={35}>
  {({ index, style }) => <div style={style}>{items[index]}</div>}
</List>;

✍️ @React_lib