Привет! Сегодня поговорим про стандартные способы оптимизации web-приложения в экстремистской библиотеке React. Мотивацией послужило некоторое количество кода, который я видел. Связан он с использованием API React не по назначению или без учета каких-то очевидных проверок на производительность и тонкостей (с натяжкой).
Какие вообще мы знаем хуки, методы, способы?
Самые популярные в React (говорим о версии 16.8+) функции для оптимизации: хуки useCallback и useMemo, метод React.memo. Разберемся для чего они.
Его величество useCallback - возвращает мемоизированный колбэк.
Неповторимый useMemo - возвращает мемоизированное значение.
Господин High Order Component (HOC) React.memo - поверхностно сравнивает компоненты между отрисовками и если входные параметры (props) не изменились, то не вызывает рендер компонента, то есть мемоизирует компонент.
Интересно, сколько начинающих разработчиков разбежалось после "мемоизация, мемоизация и еще раз мемоизация"? О том, что такое HOC сегодня говорить не будем, несложная концепция, связанная с композицией.
Так что же такое мемоизация?
По сути банальное кэширование значений. Да, вот так просто. Как это работает? В документации в целом был описан алгоритм, по которому все работает. Напоминаю: в хуки useMemo и useCallback мы передаем вторым параметром массив зависимостей и если какая-то зависимость изменяется, то высчитываем значение заново (ну или пересоздаем функцию), если нет - возвращаем результат предыдущих вычислений. Так как нам очевидно, что если у нас есть переменная sum, которая содержит сумму чисел a и b, то нам не обязательно заново складывать a и b между рендерами, если мы это уже делали и переменные не изменились.
По сути это и есть вся идея мемоизации, для лучшего понимания оставлю пример мемоизирования на чистом JS, вдруг кто-то еще не сталкивался.
Мемоизация на JS
const memo = (callback) => {
// здесь будем хранить результаты вызовов функции
const cache = {};
// ну вот и понадобилось замыкание:)
return (...args) => {
// тут создаем ключ, по которому достанем/сохраним результат
// можно лучше, но сделаем пока что так
const key = JSON.stringify(args);
// очевидно достаем кэш, если он есть
if (key in cache) {
return cache[key];
}
const result = callback(...args);
cache[key] = result; // кэшируем
return result;
};
};
const sum = (a, b) => {
console.log('Call sum', a, b);
return a + b;
};
// мемоизируем функцию
const memoSum = memo(sum);
// проверяем
memoSum(1, 2);
memoSum(100, 31);
memoSum(1, 2);
memoSum(1, 2);
memoSum(1, 2);
memoSum(0, 9);
Получили: сокращение количество вызовов.
А в чем подвох? Подвох в том, что кэш надо где-то хранить, спойлер: используется память, поэтому будьте аккуратнее, совсем не обязательно оптимизировать вызовы примитивных функций, который вызываются много раз. Приложение просядет по памяти.
А как же все-таки это все поможет в React приложении?
Создадим простое приложение а-ля to-do list и будем оптимизировать.
Компонент App (корневой)
import "./App.css";
import ItemList from "./components/ItemList/ItemList";
function App() {
return (
<div className="App">
<ItemList />
</div>
);
}
export default App;Компонент ItemList
import React, { useState } from "react";
import styles from "./ItemList.module.css";
import Item from "../Item/Item";
const ItemsInitState = [
{
id: "1dcdf741-5140-45c1-ac2d-8512339c20df",
label: "First Item",
},
{
id: "f87f7a2d-92ab-4890-909a-0795699e7f21",
label: "Second Item",
},
{
id: "8a6ff044-80fb-4fd7-b021-9eed7f9ffc24",
label: "Third Item",
},
];
const ItemList = () => {
const [items, setItems] = useState(ItemsInitState);
const remove = (id) =>
setItems((prev) => prev.filter((item) => item.id !== id));
return (
<div className={styles.ItemList}>
{
items.map((item) => <Item item={item} remove={remove} />)
}
</div>
);
};
export default ItemList;Компонент Item
import React from "react";
import styles from "./Item.module.css";
const Item = ({ item, remove }) => {
console.log(`${item.label}`);
return (
<div className={styles.Item}>
<h2>{item.label}</h2>
<button onClick={remove.bind(null, item.id)} />
</div>
);
};
export default Item;Что произойдет при запуске? Посмотрим в консоль.
Ай-ай-ай, самое важное, добавить key.
items.map((item) => <Item key={item.id} item={item} remove={remove} />)А теперь удалим элемент и посмотрим сколько раз вызовется функция/компонент Item.
Окей, а как это исправить? Многие используют для этих целей useCallback и useMemo, ожидая, что это поможет, ну или код станет лучше работать. Давайте попробуем.
const remove = useCallback((id) =>
setItems((prev) => prev.filter((item) => item.id !== id)), []);Как думаете, что случится? Да ничего, вызовы будут такими же, вы просто мемоизировали функцию. А зачем? Вот и я думаю, что смысла в этом было мало. Причины:
на рендерах это никак не отразилось
вы увеличили стек вызова (useCallback каждый раз проверяет надо ли пересоздать функцию)
в целом с таким же успехом можно было и пересоздать ее, перфоманс не уменьшится, может даже наоборот
А как все-таки правильно? Тут в дело вступает React.memo, тот самый HOC, который мемоизирует компоненты.
export default React.memo(Item); // вызываем его при экспорте
Окей, теперь все работает, по сути это и есть правильный пример использования, мемоизировать функции в большинстве случаев надо тогда, когда вы передаете их в мемоизированные компоненты.
Кстати, а что насчет свойства key? Можете проверить сами, если его убрать, то useCallback и React.memo вам не помогут.
А useMemo когда использовать? Точно также как и useCallback, ну или если вычисления сильно сложнее pages = Math.ceil(total / perPage).
Заключение
Всегда сначала думайте, а потом делайте. Оптимизация в какой-то мере искусство и требует опыта (ну например те же сложные вычисления всегда можно просто переложить на серверную часть, на курсах такому могут и не научить).
Однозначного ответа на то как правильно нет, ситуации бывают индивидуальные, но как неправильно часто становится ясно спустя пару потраченных минут на обдумывание того или иного действия.
Спасибо за внимание!