🔥 useMemo vs useCallback — не путай!

Многие React-разработчики путают useMemo и useCallback. Давай раз и навсегда разберёмся:

🤯 В чём разница?

- useMemo(fn, deps) — мемоизирует значение, возвращает результат выполнения fn().
- useCallback(fn, deps) — мемоизирует саму функцию, возвращает fn.

💡 Когда использовать?

- useMemo — если ты вычисляешь что-то тяжёлое или зависящее от пропсов/стейта:

const filtered = useMemo(() => data.filter(i => i.active), [data]);

const handleClick = useCallback(() => {
  console.log('clicked');
}, []);

const memoized = useMemo(() => () => doSomething(), []);

Frontend разработчик

🔥 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

hottg.com/frontend_1/3952

1.7K viewsApr 15 at 03:04