Привет, друзья! Сегодня расскажу, как 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