🚀 Оптимизация React-приложения: 5 техник, которые работают
Сегодня расскажу вам, как можно ускорить работу React-приложения, если оно начинает тормозить.
1️⃣ Используйте React.memo
Если ваш компонент ререндерится без причины, оберните его в
2️⃣ Оптимизируйте контекст с useMemo и useCallback
Частая ошибка — передача в
3️⃣ Разбейте состояние на атомарные части
Часто программисты хранят весь стейт в одном
4️⃣ Динамическая подгрузка компонентов (Code Splitting)
Если у вас большое приложение, используйте
5️⃣ Используйте производительные списки
Если у вас много элементов (список в 1000+ элементов), используйте виртуализацию, например,
✍️ @React_lib
Сегодня расскажу вам, как можно ускорить работу React-приложения, если оно начинает тормозить.
1️⃣ Используйте React.memo
Если ваш компонент ререндерится без причины, оберните его в
React.memo(). Это предотвратит ненужные перерисовки, если пропсы не изменились.
const OptimizedComponent = React.memo(({ 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
![Frontender's notes [ru] Telegram Channel](/avatar/1306/1306975317.jpg)
