Як працює useCallback і навіщо він потрібен

useCallback — це React хук, який дозволяє мемоізувати (запам'ятовувати) функцію між рендерингами компонент.

Він повертає ту ж версію функції, якщо залежності не змінилися, і запобігає створенню нової функції при кожному рендерингу.

Чому useCallback?

У JavaScript функції є об'єктами посилань. Кожного разу, коли компонент рендериться, створюється нова функція:

jsx

const handleClick = () => console.log("clicked"); // нова функція при кожному рендері

Якщо ви передасте цю функцію дочірньому компоненту, він буде повторно рендеритися, навіть якщо нічого насправді не змінилося.

Хук useCallback потрібен, щоб уникнути цієї проблеми:

jsx

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

Тепер handleClick матиме ту ж саму ссылку, поки залежності в масиві не зміняться.

Синтаксис

jsx

const memoizedCallback = useCallback(() => {
  // функція
}, [dependencies]);

() => {} — функція, яку ми хочемо мемоізувати
[dependencies] — масив залежностей, як у useEffect

Приклад: без useCallback

jsx

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    console.log("Clicked");
  };

  return (
    <>
      <Child onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  );
}

const Child = React.memo(({ onClick }) => {
  console.log("🔁 Child rerendered");
  return <button onClick={onClick}>Click me</button>;
});

Навіть коли count змінюється, Child повторно рендериться, оскільки handleClick є новою ссылкою.

Приклад: з useCallback

jsx

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

Тепер Child не повторно рендериться, оскільки onClick не змінюється.

Коли використовувати useCallback

Використовуйте, якщо:

Ви передаєте функцію компоненту React.memo
Функція використовується в залежностях інших хуків (useEffect, useMemo)

Не потрібно використовувати useCallback:

На кожному обробнику "на всякий випадок"
У простих компонентх, де повторні рендери не є критичними

useCallback vs useMemo

****	useCallback	useMemo
Що повертає	Повертає функцію	Повертає значення
Приклад	`() =>`	`heavyComputation()`
Застосування	Використовується для обробників	Використовується для значень

Порада:

useCallback — це інструмент оптимізації, а не обов'язковий. Використовуйте його коли є конкретна потреба контролювати посилання на функції.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Як працює useCallback і навіщо він потрібен

#Чому useCallback?

#Синтаксис

#Приклад: без useCallback

#Приклад: з useCallback

#Коли використовувати useCallback

#useCallback vs useMemo