Почнемо з того, що вони мають однакову ціль - зменшити кількість непотрібних рендерів компонента, що зменшить використання CPU і в теорії збереже вас від потенційних проблем з продуктивність. Особливо, якщо користувач відкриває вебсайт з телефону або ваш додаток запускається на Ionic, React Native, etc.
Коли використовувати useMemo
Простими словами, він мемоізує результат обчислення. Уявіть, в вас трейдинг платформа, яка в реальному часі отримує дані про ціну різних активів. Вам на стороні фронтенду потрібно перераховувати ці значення і відносно них, оновлювати різні графіки, таблиці, портфель користувача і тд. Але не всі оновлення потребують повторного рендеру. Наприклад, якщо ціна активу не помінялась, то і графік з ним перемальовувати не потрібно. Мемоізація(useMemo) дозволяє закешувати значення і оновлювати компонент тільки тоді, коли вхідні параметри змінились.
Коли використовувати useCallback
Якщо в нас відбувається рендер компонента, то функції, які були в ньому обʼявлені також будуть перестворюватись. В теорії, це може мати вплив на продуктивність, особливо при використанні різних супер абстрактних фреймворків, по типу Ionic. useCallback - дозволяє повертати ту ж саму функцію між рендерами, поки залежності не зміняться. Таким чином він мемоізує функцію і допомагає нам уникнути зайвих перестворень.
На інтервʼю, хорошим тоном буде сказати, що будь які оптимізації продуктивності повинні грунтуватись на поточних або потенційних проблемах і найгірше, що можна робити, це витрачати час на оптимізацію в якій нема ніякого сенсу.