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

6 Березня 2024 в 20:21 116

Рендерінг компонентів є важливою частиною будь-якого React-додатку. Він відбувається кожного разу, коли відбуваються зміни в стані компоненту або коли компонент отримує нові властивості. Цей процес може стати важким для продуктивності, особливо коли маємо справу з великими додатками або компонентами, які мають багато вложених елементів. У таких випадках оптимізація рендерінгу може значно поліпшити продуктивність додатку.

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

import React, { useMemo } from 'react';
const ExampleComponent = ({ data }) => {
    const processedData = useMemo(() => {
        // Обчислення даних тут
        return processedData;
    }, [data]);
    return (
        <div>
            {/* Відображення даних */}
        </div>
    );
};

import React, { useMemo } from 'react';

const ExampleComponent = ({ data }) => {

const processedData = useMemo(() => {

// Обчислення даних тут

return processedData;

}, [data]);

return (

<div>

{/* Відображення даних */}

</div>

);

};

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

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

Крім того, у вашому коді є певні аспекти, які можуть призвести до неправильного рендерінгу компонентів, навіть при використанні useMemo. Наприклад, у вас є компонент Parent, який має стан hitCounter та clickCounter, і передає значення hitCounter до компонента Child через useMemo. Однак, ви помилилися при передачі цього значення. У компоненті Child ви використовуєте props.counter, але в реальності ви передаєте props.hitCounter. Це може призвести до неправильної роботи компонента Child.

// Помилка в передачі значення до компонента Child
const Child = (props) => {
    let data = 0;
    useEffect(() => {
        console.log("in useeffect");
        data = props.counter; // Потрібно props.hitCounter
    },[props.counter])
    console.log("in Child");
    return(
        <div>
            The Hit counter value is {data}
        </div>
    )
}

// Помилка в передачі значення до компонента Child

const Child = (props) => {

let data = 0;

useEffect(() => {

console.log("in useeffect");

data = props.counter; // Потрібно props.hitCounter

},[props.counter])

console.log("in Child");

return(

<div>

The Hit counter value is {data}

</div>

)

}

У вашому випадку можливі кілька підходів до виправлення цієї помилки. Один з них – змінити ім’я властивості, переданої до компонента Child, на counter замість hitCounter. Іншим рішенням може бути зміна компонента Child таким чином, щоб він отримував і обробляв правильне значення.