Что делает useCallback / useMemo в React?

Это лучше всего использовать, когда вы хотите предотвратить ненужную повторную визуализацию для повышения производительности.

Сравните эти два способа передачи обратных вызовов дочерним компонентам, взятым из React Docs:

1. Функция стрелки в рендере

class Foo extends Component {
  handleClick() {
    console.info('Click happened');
  }
  render() {
    return <Button onClick = {() => this.handleClick()}>Click Me</Button>;
  }
}

2. Конструктор привязки (ES2015)

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.info('Click happened');
  }
  render() {
    return <Button onClick = {this.handleClick}>Click Me</Button>;
  }
}

Предполагая, что <Button> реализован как PureComponent, первый способ приведет к повторному рендерингу <Button> при каждом повторном рендеринге <Foo>, потому что при каждом вызове render() создается новая функция. Во втором случае метод handleClick создается только один раз в конструкторе <Foo> и повторно используется во всех рендерах.

Если мы переведем оба подхода к функциональным компонентам с помощью хуков, это будут эквиваленты (вроде):

1. Стрелка в Render -> Un-memoized callback

function Foo() {
  const handleClick = () => {
    console.info('Click happened');
  }
  return <Button onClick = {handleClick}>Click Me</Button>;
}

2. Bind in Constructor (ES2015) -> Memoized callbacks.

function Foo() {
  const memoizedHandleClick = useCallback(
    () => console.info('Click happened'), [],
  ); // Tells React to memoize regardless of arguments.
  return <Button onClick = {memoizedHandleClick}>Click Me</Button>;
}

Первый способ создает обратные вызовы при каждом вызове функционального компонента, но во втором способе React запоминает функцию обратного вызова для вас, и обратный вызов не создается несколько раз.

Следовательно, в первом случае, если Button реализован с использованием React.memo, он всегда будет повторно визуализироваться (если у вас нет какой-либо пользовательской функции сравнения), потому что опора onClick каждый раз отличается, во втором случае - не будет.

В большинстве случаев можно поступить первым способом. Как говорится в документации React:

Is it OK to use arrow functions in render methods? Generally speaking, yes, it is OK, and it is often the easiest way to pass parameters to callback functions.

If you do have performance issues, by all means, optimize!

Я привел небольшой пример, чтобы помочь другим лучше понять, как он себя ведет. Вы можете запустить демонстрацию здесь или прочитать приведенный ниже код:

import React, { useState, useCallback, useMemo } from 'react';
import { render } from 'react-dom';

const App = () => {
    const [state, changeState] = useState({});
    const memoizedValue = useMemo(() => Math.random(), []);
    const memoizedCallback = useCallback(() => console.info(memoizedValue), []);
    const unMemoizedCallback = () => console.info(memoizedValue);
    const {prevMemoizedCallback, prevUnMemoizedCallback} = state;
    return (
      <>
        <p>Memoized value: {memoizedValue}</p>
        <p>New update {Math.random()}</p>
        <p>is prevMemoizedCallback === to memoizedCallback: { String(prevMemoizedCallback === memoizedCallback)}</p>
        <p>is prevUnMemoizedCallback === to unMemoizedCallback: { String(prevUnMemoizedCallback === unMemoizedCallback) }</p>
        <p><button onClick = {memoizedCallback}>memoizedCallback</button></p>
        <p><button onClick = {unMemoizedCallback}>unMemoizedCallback</button></p>
        <p><button onClick = {() => changeState({ prevMemoizedCallback: memoizedCallback, prevUnMemoizedCallback: unMemoizedCallback })}>update State</button></p>
      </>
    );
};

render(<App />, document.getElementById('root'));

useCallback и useMemo - это попытка обойти слабые места, которые связаны с подходом функционального программирования, выбранным с помощью перехватчиков React. В Javascript каждая сущность, независимо от того, является ли она функцией, переменной или чем-то еще, создается в памяти, когда выполнение входит в блок кода функции. Это большая проблема для React, который попытается определить, нужно ли отрендерить компонент. Необходимость повторной визуализации вычитается на основе входных свойств и контекстов. Давайте посмотрим на простой пример без useCallback.

const Component = () => {
  const [counter, setCounter] = useState(0);

  const handleClick = () => {
    setCounter(counter + 1);
  }

  return <div>
    Counter:{counter}<br/>
    <button onClick = {handleClick}>+1</button>
  </div>
}

Обратите внимание, что экземпляр функции handleClick будет создаваться при каждом вызове функции внутри блока, поэтому адрес обработчика событий при каждом вызове будет другим. Фреймворк React всегда будет видеть обработчик событий как измененный из-за этого. В приведенном выше примере React будет рассматривать handleClick как новое значение при каждом вызове. У него просто нет инструментов, чтобы отличить его от одного и того же вызова.

Что делает useCallback, он внутренне сохраняет первую введенную версию функции и возвращает ее вызывающей стороне, если перечисленные переменные не изменились.

const Component = () => {
  const [counter, setCounter] = useState(0);

  const handleClick = useCallback(() => {
    setCounter(counter + 1);
  }, [])

  return <div>
    Counter:{counter}<br/>
    <button onClick = {handleClick}>+1</button>
  </div>
}

Теперь, с помощью приведенного выше кода, React идентифицирует обработчик события handleClick как тот же самый, благодаря вызову функции useCallback. Он всегда будет возвращать один и тот же экземпляр функции, и механизм рендеринга компонентов React будет доволен.

Сохранение функции внутри useCallback приведет к новой проблеме. Сохраненный экземпляр вызова функции не будет иметь прямого доступа к переменным текущего вызова функции. Вместо этого он увидит переменные, введенные в вызове первоначального закрытия, в котором была создана сохраненная функция. Таким образом, вызов не будет работать для обновленных переменных. Вот почему вам нужно знать, изменились ли некоторые используемые переменные. Таким образом, useCallback сохранит текущий экземпляр вызова функции как новый сохраненный экземпляр. Список переменных в качестве второго аргумента useCallback - это список переменных для этой функции. В нашем примере нам нужно сообщить функции useCallback, что нам нужна свежая версия counter -variable при каждом вызове. Если мы этого не сделаем, значение счетчика после вызова всегда будет равно 1, что соответствует исходному значению 0 плюс 1.

const Component = () => {
  const [counter, setCounter] = useState(0);

  const handleClick = useCallback(() => {
    setCounter(counter + 1);
  }, [counter])

  return <div>
    Counter:{counter}<br/>
    <button onClick = {handleClick}>+1</button>
  </div>
}

Теперь у нас есть рабочая версия кода, которая не будет перерисовываться при каждом вызове.

Приятно отметить, что вызов useState находится здесь по той же причине. Функциональный блок не имеет внутреннего состояния, поэтому хуки используют useState, useCallback и useMemo для имитации базовой функциональности классов. В этом смысле функциональное программирование - это большой шаг назад в истории, ближе к процедурному программированию.

useMemo - это тот же механизм, что и useCallback, но для других объектов и переменных. С его помощью вы можете ограничить потребность в повторном рендеринге компонентов, поскольку функция useMemo будет возвращать одни и те же значения при каждом вызове функции, если перечисленные поля не изменились.

Эта часть нового подхода к перехватам React определенно является самым слабым местом системы. useCallback в значительной степени нелогичен и действительно подвержен ошибкам. С вызовами и зависимостями useCallback слишком легко в конечном итоге изменить внутренние циклы. Этого предостережения у нас не было с подходом React Class.

В конце концов, оригинальный подход с классами оказался более эффективным. useCallback уменьшит потребность в повторном рендеринге, но он повторно генерирует функцию каждый раз, когда некоторые из ее зависимых переменных изменятся, и сопоставление, если переменные имеют изменения, само по себе приведет к накладным расходам. Это может вызвать больше повторных рендеров, чем необходимо. Это не относится к классам React.

Обработчик событий воссоздается, и ему по умолчанию назначается другой адрес при каждом рендеринге, что приводит к изменению объекта «props». Ниже кнопка 2 не отображается повторно, поскольку объект «props» не изменился. Обратите внимание, как вся функция Example () выполняется до завершения при каждом рендеринге.

const MyButton = React.memo(props=>{
   console.info('firing from '+props.id);
   return (<button onClick = {props.eh}>{props.id}</button>);
});

function Example(){
   const [a,setA] = React.useState(0);
   const unmemoizedCallback = () => {};
   const memoizedCallback = React.useCallback(()=>{},[]);   // don’t forget []!
   setTimeout(()=>{setA(a=>(a+1));},3000);
   return (<React.Fragment>
                 <MyButton id = "1" eh = {unmemoizedCallback}/>
                 <MyButton id = "2" eh = {memoizedCallback}/>
                 <MyButton id = "3" eh = {()=>memoizedCallback}/>
           </React.Fragment>);
} 
ReactDOM.render(<Example/>,document.querySelector("div"));