20.07.2026 05:26
🔥 useMemo vs useCallback — не путай!
🔥 useMemo vs useCallback — не путай!
Многие React-разработчики путают useMemo и useCallback. Давай раз и навсегда разберёмся:
🤯 В чём разница?
- useMemo(fn, deps) — мемоизирует значение, возвращает результат выполнения fn().
- useCallback(fn, deps) — мемоизирует саму функцию, возвращает fn.
💡 Когда использовать?
- useMemo — если ты вычисляешь что-то тяжёлое или зависящее от пропсов/стейта:
const filtered = useMemo(() => data.filter(i => i.active), [data]);
- useCallback — если передаёшь функцию в дочерний компонент, чтобы избежать лишних ререндеров:
const handleClick = useCallback(() => {
console.log('clicked');
}, []);
⚠️ Антипаттерн
const memoized = useMemo(() => () => doSomething(), []);
Это просто useCallback(doSomething, []). Не усложняй 😄
🔁 Используй по назначению — и код будет быстрее и понятнее!
👉 @frontend_1
Многие React-разработчики путают useMemo и useCallback. Давай раз и навсегда разберёмся:
🤯 В чём разница?
- useMemo(fn, deps) — мемоизирует значение, возвращает результат выполнения fn().
- useCallback(fn, deps) — мемоизирует саму функцию, возвращает fn.
💡 Когда использовать?
- useMemo — если ты вычисляешь что-то тяжёлое или зависящее от пропсов/стейта:
const filtered = useMemo(() => data.filter(i => i.active), [data]);
- useCallback — если передаёшь функцию в дочерний компонент, чтобы избежать лишних ререндеров:
const handleClick = useCallback(() => {
console.log('clicked');
}, []);
⚠️ Антипаттерн
const memoized = useMemo(() => () => doSomething(), []);
Это просто useCallback(doSomething, []). Не усложняй 😄
🔁 Используй по назначению — и код будет быстрее и понятнее!
👉 @frontend_1