React швидкий — поки ти не зробиш його повільним. Так, я маю на увазі непотрібні повторні рендери, які таємно споживають ресурси твого додатку і змушують тебе дивуватись, чому він не такий швидкий, як твоя ранкова кава. Давай виправимо це, один підступний рендер за раз, з цими практичними порадами (і, можливо, трішки гумору).
1. React.memo: Лінивий колега
Уяви, що React.memo — це той колега, який відмовляється робити додаткову роботу, якщо це не є абсолютно необхідним. Він змушує твої функціональні компоненти вести себе правильно — ніяких повторних рендерів, якщо пропси насправді не змінилися.
Ось як це працює:
import React from 'react';
const LazyChild = React.memo(({ prop1, prop2 }) => {
console.log('Повторний рендер? Та ні.');
return
{prop1} loves {prop2}
; });
✨ Порада: Використовуй React.memo, коли твій компонент без стану або йому не важливі глибокі зміни пропсів. Але будь обережний — це не вирішує абсолютно всі проблеми.
2. useCallback: Стабілізуємо функції!
Інлайн-функції? Милі, але небезпечні. Кожен рендер створює нову посилання на функцію, і твій дочірній компонент в паніці: “Нові пропси? Час робити повторний рендер!” Ось тут на допомогу приходить useCallback.
import React, { useCallback } from 'react';
const ParentComponent = () => {
const handleClick = useCallback(() => {
console.log('Натиснуто!');
}, []); // "Не створюй мене знову, я і так у порядку."
return Click Me!;
};
В основному, useCallback — це твій спосіб сказати: "Спокійно, React, це та сама функція, що і раніше."
3. useMemo: Заощаджуємо розумову енергію для важливих речей
Ти знаєш того друга, який завжди занадто багато думає? Не дозволяй твоєму React додатку бути таким другом. Використовуй useMemo, щоб зберігати результати дорогих обчислень, щоб твій додаток не робив одну й ту саму математику знову і знову.
import React, { useMemo } from 'react';
const ExpensiveComponent = ({ data }) => {
const processedData = useMemo(() => {
console.log('Обробка даних...');
return data.filter(item => item.active);
}, [data]);
return
{processedData.length} активних елементів
;
};
Тепер твій додаток заощадив достатньо розумової енергії, щоб нарешті запам’ятати твій день народження.
4. Інлайн-функції та об’єкти: Просто не роби цього
Якщо ти передаєш інлайн-об’єкти або функції як пропси, React їх побачить і закричить: “Нове! Повторний рендер!” Це як змінювати одяг кожні 5 хвилин — це просто не ефективно.
Замість цього, дай useCallback і useMemo опікуватись твоїми складними пропсами:
const Parent = () => {
const stableObject = useMemo(() => ({ key: 'value' }), []);
const stableFunction = useCallback(() => console.log('Без драми тут'), []);
return ;
};
Зупини хаос. Твої дочірні компоненти подякують тобі.
5. Незаперечний стан: Не чіпай!
Мутувати стан — це як їсти чіпси без того, щоб помити руки — залишаєш безлад. Використовуй бібліотеки, як Immer, або просто створюй нові об’єкти, коли оновлюєш стан.
import produce from 'immer';
const Parent = () => {
const [state, setState] = React.useState({ counter: 0 });
const updateState = () => {
setState(currentState =>
produce(currentState, draft => {
draft.counter += 1;
})
);
};
return Лічильник: {state.counter};
};
Новий стан, нове посилання, щасливий React.
React 19: Робимо життя простішим (щось на кшталт того)
З React 19 (і його магічними Server Components), фреймворк робить більше важкої роботи за тебе. Але не лінуйся — поганий код все одно залишатиметься поганим. Профілюй свій додаток за допомогою React DevTools або Lighthouse і оптимізуй там, де це важливо.
Останні думки: Не надто хвилюйся
Оптимізація — це круто, але не лагодь те, що і так працює. Якщо твій додаток працює гладко, не потрібно займатися надмірним інженерством.
І якщо це не так? Почни профілювати додаток, а заодно додай трохи React.memo і його друзів.
Тому що швидкий додаток — це як хороший жарт — він просто вражає по-особливому.
Посилання:
- React.memo
- useCallback
- useMemo
- MDN Web Docs — React Hooks: useCallback
- MDN Web Docs — useMemo
- Офіційна документація Immer
Перекладено з: Stop Wasting Your React App’s Energy: A Casual Guide to Preventing Useless Re-renders