Найкращі практики для покращення продуктивності в React

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

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

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

1. Візуалізація списків: Покращення продуктивності шляхом рендерингу лише видимих елементів при роботі з великими списками.
2. Ліниве завантаження зображень: Покращення часу завантаження сторінки шляхом завантаження зображень лише за необхідності.
3. Дебаунсинг: Запобігання непотрібним операціям шляхом затримки взаємодії користувача на визначений час.
4. Тротлінг: Покращення продуктивності часто викликаних подій шляхом обмеження їх виконання до певних інтервалів.
5. React.memo: Запобігання непотрібному повторному рендерингу функціональних компонентів.
6. useMemo: Забезпечення того, щоб обчислені значення перераховувались лише тоді, коли змінюються їх залежності.
7. useCallback: Забезпечення того, щоб функції відтворювались тільки тоді, коли змінюються їх залежності.
8. Розділення коду: Покращення часу початкового завантаження шляхом поділу коду додатка на менші частини і завантаження лише необхідних.

Ми детально розглянемо кожну з цих технік і пояснимо, як застосувати їх у ваших додатках з прикладами. Таким чином, ви зможете оптимізувати продуктивність ваших додатків на React і забезпечити швидший та більш відгукний досвід для ваших користувачів.

1. Візуалізація списків

При роботі з великими наборами даних, рендеринг усіх елементів списку в DOM одночасно може призвести до проблем з продуктивністю. Техніки візуалізації списків покращують продуктивність, рендерячи лише видимі елементи. Популярні бібліотеки для цього включають react-window або react-virtualized.

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

const Row = ({ index, style }) => (  

    Row {index}    
   );      const MyList = ({ items }) => (        {Row}       ); ```  

## 2. Ліниве завантаження зображень

Замість того, щоб завантажувати всі зображення на веб-сторінці одразу, їх завантаження по мірі їх появи у користувача значно покращує час завантаження сторінки та продуктивність. Цю техніку можна реалізувати за допомогою `react-lazyload` або API Intersection Observer.

import React from 'react';
import LazyLoad from 'react-lazyload';

const ImageComponent = () => (
); ```

3. Дебаунсинг

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

import React, { useState, useCallback } from 'react';   
import debounce from 'lodash.debounce';      

const SearchComponent = () => {    
   const [query, setQuery] = useState('');       

   const handleSearch = useCallback(debounce((event) => {    
       setQuery(event.target.value);    
       // виклик API або логіка фільтрації тут    
   }, 300), []);       

   return (        
   );   
}; ```  

## 4.
## 4. Тротлінг

Подібно до дебаунсингу, тротлінг покращує продуктивність, обмежуючи виконання часто викликаних подій до певних інтервалів. Це особливо корисно для подій, таких як прокручування вікна. Для цього ідеально підходить `lodash.throttle`.

import React, { useEffect } from 'react';
import throttle from 'lodash.throttle';

const ScrollComponent = () => {
useEffect(() => {
const handleScroll = throttle(() => {
console.log('Scroll event triggered');
}, 1000);

window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);

return (

Scroll down to see the effect.    
);   }; ```  

5. React.memo

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

import React from 'react';      

const MyComponent = React.memo(({ name }) => {    
    console.log('Rendering MyComponent');    
    return 
{name}
;   
});      

const ParentComponent = () => {    
    return ;   
}; ```  

## 6. useMemo

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

import React, { useMemo } from 'react';

const FibonacciComponent = ({ num }) => {
const fibonacci = useMemo(() => {
const fib = (n) => {
if (n <= 1) return n;
return fib(n - 1) + fib(n - 2);
};
return fib(num);
}, [num]);

return 

Fibonacci of {num} is {fibonacci}
;
}; ```

7. useCallback

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

import React, { useCallback, useState } from 'react';      

const ChildComponent = React.memo(({ onClick }) => {    
    console.log('Rendering ChildComponent');    
    return Click me;   
});      

const ParentComponent = () => {    
    const [count, setCount] = useState(0);       

    const handleClick = useCallback(() => {    
        setCount(count + 1);    
    }, [count]);       

    return ;   
}; ```  

## 8. Розділення коду

Розділення коду покращує час початкового завантаження, поділяючи код додатка на менші частини і завантажуючи лише необхідні. Це можна реалізувати за допомогою `React.lazy` та `Suspense`.

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => (
Loading...

          ); ```  

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

Перекладено з: React Performance Best Practices