React

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

Сегодня расскажу вам, как можно ускорить работу 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

www.tg-me.com/us/telegram/com.React_lib/651

1.3K viewsFeb 16 at 16:44

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

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

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

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

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

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

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

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

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

BY React