📌 Оптимизация производительности React-приложения: useMemo и useCallback

📌 Оптимизация производительности React-приложения: useMemo и useCallback

Привет, друзья! Сегодня расскажу, как useMemo и useCallback помогают оптимизировать React-приложения.

🚀 Проблема

Когда компоненты ререндерятся слишком часто, производительность падает. Особенно если в них тяжелые вычисления или вложенные коллбэки, передающиеся в дочерние компоненты.

🛠 Решение: useMemo и useCallback

✅ useMemo – мемоизирует результат вычислений, чтобы не пересчитывать одно и то же на каждом ререндере.

const expensiveCalculation = useMemo(() => {

return someHeavyFunction(data);

}, [data]); // Пересчитается только при изменении data

✅ useCallback – мемоизирует саму функцию, чтобы не создавать новую при каждом ререндере. Это полезно, если передаёте коллбэк в дочерний компонент.

const handleClick = useCallback(() => {

console.log("Clicked!");

}, []); // Функция не будет пересоздаваться при каждом ререндере

⚠️ Важно:

Не стоит мемоизировать всё подряд! Это не панацея, а инструмент для конкретных случаев. Если лишняя мемоизация, то она только замедлит приложение.

Вы уже используете useMemo и useCallback в своих проектах? Пишите в комментариях!

✍️ @React_lib