React useMemo: Оптимізація продуктивності за допомогою мемоізації

У світі розробки на React продуктивність має першочергове значення. Зі зростанням складності додатків забезпечення плавного та швидкого користувацького досвіду стає все більш важливим. Одним із потужних інструментів в арсеналі React для оптимізації продуктивності є хук useMemo. Цей хук дозволяє вам мемоізувати, або кешувати, результат дорогих обчислень, запобігаючи зайвим повторним обчисленням і покращуючи ефективність вашого додатку.

Що таке мемоізація

По суті, мемоізація — це техніка, що використовується для оптимізації функцій шляхом зберігання результатів дорогих викликів функцій та повернення кешованого результату, коли ті самі вхідні дані з’являються знову. Замість повторного виконання обчислення, функція просто отримує раніше обчислене значення. Це може значно зменшити час та ресурси, необхідні для виконання функції, особливо при роботі зі складними обчисленнями або великими наборами даних.

Уявіть, що у вас є функція, яка обчислює факторіал числа. Обчислення факторіала великого числа може бути ресурсомістким. Мемоізація може допомогти, зберігаючи факторіал кожного числа, яке вже було обчислено. Наступного разу, коли функцію буде викликано з тим самим числом, вона зможе просто отримати збережений результат замість того, щоб переобчислювати його.

Знайомство з React useMemo

Хук useMemo в React надає спосіб мемоізації значень у функціональних компонентах. Він приймає два аргументи:

• Функцію, яка виконує обчислення.
• Масив залежностей.

Хук useMemo повторно запустить функцію лише тоді, коли зміниться одна із залежностей у масиві. Якщо залежності залишаються незмінними, він поверне кешоване значення з попереднього рендеру. Це запобігає непотрібному виконанню функції, що може значно покращити продуктивність, особливо при роботі з дорогими обчисленнями.

Синтаксис useMemo

Синтаксис useMemo простий:

const memoizedValue = useMemo(() => {
  // Дороге обчислення тут
  return computeExpensiveValue(a, b);
}, [a, b]);

У цьому прикладі computeExpensiveValue(a, b) — це функція, яка виконує дороге обчислення. Масив [a, b] визначає залежності. Хук useMemo повторно запустить функцію computeExpensiveValue лише у випадку зміни a або b. В іншому випадку він поверне кешоване значення з попереднього рендеру.

Коли використовувати useMemo

useMemo є найкориснішим у таких сценаріях:

• Дорогі обчислення: Коли у вас є функція, що виконує ресурсомістке завдання, наприклад, складні перетворення даних або фільтрацію великих наборів даних.
• Перевірка посилальної рівності: Коли вам потрібно забезпечити, щоб значення змінювалося лише тоді, коли змінюються його базові залежності, особливо при передачі значень як пропсів дочірнім компонентам, які використовують React.memo.
• Запобігання зайвим перерендерам: Коли ви хочете запобігти перерендеру компонента, якщо його пропси або стан фактично не змінилися.

Розглянемо кожен із цих сценаріїв на практичних прикладах.

Сценарій 1: Дорогі обчислення

Розглянемо сценарій, коли вам потрібно відфільтрувати великий масив даних користувачів за певними критеріями. Фільтрація великого масиву може бути обчислювально дорогою, особливо якщо логіка фільтрації складна.

const UserList = ({ users, filter }) => {
  const filteredUsers = useMemo(() => {
    console.log('Фільтрація користувачів...'); // Симуляція дорогого обчислення
    return users.filter(user => user.name.toLowerCase().includes(filter.toLowerCase()));
  }, [users, filter]);

  return (
    

      {filteredUsers.map(user => (
        
{user.name}
      ))}
    
  );
};

У цьому прикладі змінна filteredUsers мемоізована за допомогою useMemo. Логіка фільтрації виконується повторно лише тоді, коли змінюється масив users або значення filter. Якщо масив users і значення filter залишаються незмінними, хук useMemo поверне кешований масив filteredUsers, запобігаючи непотрібному повторному виконанню логіки фільтрації.

Сценарій 2: Перевірка посилальної рівності

При передачі значень як пропсів дочірнім компонентам, які використовують React.memo, важливо переконатися, що пропси змінюються лише тоді, коли змінюються їхні базові залежності. В іншому випадку дочірній компонент може перерендеритися без необхідності, навіть якщо дані, які він відображає, не змінилися.

const MyComponent = React.memo(({ data }) => {
  console.log('MyComponent перерендерився!');
  return 
{data.value}
;
});

const ParentComponent = () => {
  const [a, setA] = React.useState(1);
  const [b, setB] = React.useState(2);

  const data = useMemo(() => ({
    value: a + b,
  }), [a, b]);

  return (
    

      
       setA(a + 1)}>Increment A
       setB(b + 1)}>Increment B
    
  );
};

У цьому прикладі об'єкт data мемоізований за допомогою useMemo. Компонент MyComponent, обгорнутий у React.memo, буде перерендерений лише тоді, коли зміниться проп data. Оскільки data мемоізований, він зміниться лише при зміні a або b. Без useMemo новий об'єкт data створювався б при кожному рендері ParentComponent, що призводило б до непотрібного перерендеру MyComponent, навіть якщо значення a + b залишалося б тим самим.

Сценарій 3: Запобігання зайвим перерендерам

Іноді ви можете захотіти запобігти перерендеру компонента, якщо його пропси або стан фактично не змінилися. Це може бути особливо корисним для оптимізації продуктивності складних компонентів, які мають багато дочірніх компонентів.

const MyComponent = ({ config }) => {
  const processedConfig = useMemo(() => {
    // Обробка об'єкта config (дорога операція)
    console.log('Обробка конфігурації...');
    let result = {...config}; // Простий приклад, але може бути складним
    if (result.theme === 'dark') {
        result.textColor = 'white';
    } else {
        result.textColor = 'black';
    }
    return result;
  }, [config]);

  return (
    

      
{processedConfig.title}
      
{processedConfig.description}
    
  );
};

const App = () => {
  const [theme, setTheme] = React.useState('light');
  const config = useMemo(() => ({
      title: 'My App', 
      description: 'This is a sample app.',
      theme: theme
  }), [theme]);

  return (
    

      
       setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme
    
  );
};

У цьому прикладі об'єкт processedConfig мемоізується на основі пропса config. Дорога логіка обробки конфігурації виконується лише тоді, коли змінюється сам об'єкт config (тобто, коли змінюється тема). Важливо, що хоча об'єкт `config` перевизначається в компоненті `App` щоразу, коли `App` перерендериться, використання `useMemo` гарантує, що об'єкт `config` фактично *зміниться* лише тоді, коли зміниться сама змінна `theme`. Без хука useMemo у компоненті `App` новий об'єкт `config` створювався б при кожному рендері `App`, змушуючи `MyComponent` щоразу переобчислювати `processedConfig`, навіть якщо базові дані (тема) насправді були тими ж самими.

Поширені помилки, яких слід уникати

Хоча useMemo є потужним інструментом, важливо використовувати його розсудливо. Надмірне використання useMemo може насправді погіршити продуктивність, якщо накладні витрати на керування мемоізованими значеннями перевищують переваги від уникнення повторних обчислень.

• Надмірна мемоізація: Не мемоізуйте все підряд! Мемоізуйте лише ті значення, обчислення яких є справді дорогим, або ті, що використовуються для перевірки посилальної рівності.
• Неправильні залежності: Переконайтеся, що ви включили всі залежності, на які покладається функція, до масиву залежностей. В іншому випадку мемоізоване значення може стати застарілим і призвести до несподіваної поведінки.
• Забуті залежності: Забута залежність може призвести до непомітних помилок, які важко відстежити. Завжди перевіряйте свої масиви залежностей, щоб переконатися, що вони повні.
• Передчасна оптимізація: Не оптимізуйте передчасно. Оптимізуйте лише тоді, коли ви виявили вузьке місце в продуктивності. Використовуйте інструменти профілювання, щоб визначити ті частини вашого коду, які насправді спричиняють проблеми з продуктивністю.

Альтернативи useMemo

Хоча useMemo є потужним інструментом для мемоізації значень, існують й інші методи, які можна використовувати для оптимізації продуктивності в додатках на React.

• React.memo: React.memo — це компонент вищого порядку, який мемоізує функціональний компонент. Він запобігає перерендеру компонента, якщо його пропси не змінилися. Це корисно для оптимізації продуктивності компонентів, які багаторазово отримують однакові пропси.
• PureComponent (для класових компонентів): Подібно до React.memo, PureComponent виконує поверхневе порівняння пропсів і стану, щоб визначити, чи слід перерендерити компонент.
• Розділення коду (Code Splitting): Розділення коду дозволяє розбити ваш додаток на менші пакети, які можна завантажувати за вимогою. Це може покращити початковий час завантаження вашого додатку та зменшити кількість коду, який потрібно аналізувати та виконувати.
• Debouncing та Throttling: Debouncing та throttling — це техніки, що використовуються для обмеження частоти виконання функції. Це може бути корисним для оптимізації продуктивності обробників подій, які спрацьовують часто, наприклад, обробники прокрутки або зміни розміру вікна.

Практичні приклади з усього світу

Давайте розглянемо кілька прикладів того, як useMemo можна застосовувати в різних контекстах по всьому світу:

• Електронна комерція (глобальна): Глобальна платформа електронної комерції може використовувати useMemo для кешування результатів складних операцій фільтрації та сортування продуктів, забезпечуючи швидкий та чуйний досвід покупок для користувачів у всьому світі, незалежно від їхнього місцезнаходження чи швидкості інтернет-з'єднання. Наприклад, користувач у Токіо, який фільтрує товари за ціновим діапазоном та наявністю, отримає перевагу від мемоізованої функції фільтрації.
• Фінансова панель (міжнародна): Фінансова панель, що відображає ціни на акції та ринкові дані в реальному часі, може використовувати useMemo для кешування результатів обчислень фінансових індикаторів, таких як ковзні середні або показники волатильності. Це запобіжить сповільненню роботи панелі при відображенні великих обсягів даних. Трейдер у Лондоні, що стежить за динамікою акцій, побачить більш плавні оновлення.
• Картографічний додаток (регіональний): Картографічний додаток, що відображає географічні дані, може використовувати useMemo для кешування результатів обчислень, пов'язаних з картографічними проєкціями та перетворенням координат. Це покращить продуктивність додатку при масштабуванні та панорамуванні карти, особливо при роботі з великими наборами даних або складними стилями карти. Користувач, що досліджує детальну карту тропічних лісів Амазонки, відчує швидший рендеринг.
• Додаток для перекладу (багатомовний): Уявіть собі додаток для перекладу мов, якому потрібно обробляти та відображати великі фрагменти перекладеного тексту. useMemo можна було б використовувати для мемоізації форматування та рендерингу тексту, забезпечуючи плавний користувацький досвід, незалежно від мови, що відображається. Це особливо важливо для мов зі складними наборами символів, як-от китайська чи арабська.

Висновок

Хук useMemo є цінним інструментом для оптимізації продуктивності додатків на React. Мемоізуючи дорогі обчислення та запобігаючи зайвим перерендерам, ви можете значно покращити швидкість та ефективність вашого коду. Однак важливо використовувати useMemo розсудливо та розуміти його обмеження. Надмірне використання useMemo може насправді погіршити продуктивність, тому вкрай важливо визначати ті частини вашого коду, які насправді спричиняють проблеми з продуктивністю, і зосереджувати свої зусилля з оптимізації саме на них.

Розуміючи принципи мемоізації та ефективного використання хука useMemo, ви можете створювати високопродуктивні додатки на React, які забезпечують плавний та чуйний користувацький досвід для користувачів у всьому світі. Не забувайте профілювати свій код, виявляти вузькі місця та стратегічно застосовувати useMemo для досягнення найкращих результатів.