0

Товарищи.. Возникла проблема, не могу понять фишки хуков useCallback и UseMemo. Читал уже доку и пару разных статей, но нет четкой картины для чего это нужно, какая от этого польза, в какой фазе это происходит. Буду признателен за любое доходчивое объяснение.

2 ответа 2

3

Начнем с useCallback

Давайте напишем самую простую функцию счетчик.

function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      <p>counter: {count}</p>
      <button 
      onClick={_ => setCount(prevCount => prevCount + 1)}>
        increment</button>
    </div>
  );
}

Добавим туда функцию, которая выводит на консоль текст

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

  const helloConsole = _ => {
    console.log("hi chaps :)");
  };
  helloConsole();

  return (
    <div className="App">
      <p>counter: {count}</p>
      <button 
      onClick={_ => setCount(prevCount => prevCount + 1)}>
        increment</button>
    </div>
  );
}

Теперь при каждом увеличении счетчика это функция helloConsole будет заново создаваться. То есть

Первый render

function App() {
  const count = 0; 

  const helloConsole = _ => {
    console.log("hi chaps :)");
  };
  helloConsole();
  //...

Второй render

function App() {
  const count = 1; 

  const helloConsole = _ => {
    console.log("hi chaps :)");
  };
  helloConsole();
  //...

Третий render

function App() {
  const count = 2; 

  const helloConsole = _ => {
    console.log("hi chaps :)");
  };
  helloConsole();
  //...

И функция helloConsole из первого render-а НЕ равен функции из второго render-а и т.д. При каждом рендере создаётся новая функция helloConsole с новой ссылкой.

// 1 count -------  2 count  //         
helloConsole !== helloConsole

И тут надо подумать что будет если на реальном проекте у вас будет такая функция которая каждый раз пересоздаётся и внутри 500 строк кода делает определенные вычисления. Я думаю производительность этого компонента упадет.И даже в зависимости от ситуации и кода можно будет заметить это невооруженным глазом.

Решение useCallback

Надо обернуть вашу функцию в useCallback и добавить массив зависимостей.

  const anyFunc = useCallback(() => {
    // 500 строк кода
  }, [dependencies]);

ВАЖНЫЕ ЗАМЕЧАНИЕ

1.Не надо использовать useCallback без массива зависимостей.

  const anyFunc = useCallback(() => {
    // любой код
  }, []);

Так писать НЕ надо. Тут вы больше потеряете чем, получите. Если нет массива зависимостей просто напишите функцию за пределы компонента. Как то так.

  const anyFunc = () => {
    // любой код
  };

function App () { // наш компонент

Этот код идентичен useCallback без массива зависимостей. Советую использовать именно второй подход если массив useCallback пустой.

2.Не надо использовать useCallback везде где можно использовать.

  const handleClick = useCallback(() => {
    // обработать события клика 
  }, []);

Опять же в таком коде вы потеряете больше чем, получите. Ваш компонент станет медленнее.

Вот тут можно посмотреть как работает компонент с и без useCallback

Хук useMemo

В отличие от useCallback которой мемоизирует только коллбэки useMemo мемоизирует все.

const List = React.useMemo(() =>
  listOfItems.map(item => ({
    ...item,
    itemProp1: expensiveFunction(props.first),
    itemProp2: anotherPriceyFunction(props.second)
  })), [listOfItems]
)

Пример взят отсюда

В этом случае useMemo возвращает массив.

В ссылке наверху который я указал написано

If you implement useMemo too often in an application, it can harm the performance.

Если вы будете использовать useMemo часто  это может нанести вред по быстродействии приложения.

Это значит второе замечание которое я написал наверху для useCallback актуально и для useMemo.

Также если вы попытаетесь мемоизировать коллбэк в useMemo это будет идентично использованию useCallback

useCallback(fn, deps) — это эквивалент useMemo(() => fn, deps).
1

useCallback запоминает функцию и не пересоздаёт её заново в целях оптимизации.

useMemo запоминает значение и не пересчитывает его (сложные математические вычисления), также для оптимизации.

Применяется в зависимости от того что нужно: функция или значение.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.