В чем основное различие между useCallback, useMemo и useEffect. Приведите примеры использования useCallback, useMemo и useEffect.

Ответы

Ответ 1

useEffect() позволит вам создавать побочные эффекты для ваших компонентов на основе зависимостей, которые вы ему отправляете.

function Example() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    document.title = 'You clicked ${count} times';
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

ReactDOM.render(<Example />, document.getElementById('root'))

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="root"></div>

Ответ 2

Краткое объяснение.

useEffect

Это альтернатива для методов класса lifecicle (componentDidMount, componentWillUnmount, componentDidUpdate ,...), и вы также можете использовать его как побочный эффект, основанный на некоторых зависимостях, "когда некоторые переменные меняются, делайте это".

useCallback

При каждом рендеринге все, что находится внутри компонента (функции), запускается снова, поэтому, если какой-либо дочерний компонент зависит от какой-либо функции от родительского компонента, дочерний объект будет перерисовываться каждый раз, когда родительский перерисовывается, даже если эта функция "не делает" t change "(ссылка меняется, но функция не работает).
Он использовался для оптимизации, избегая этого ненужного дочернего рендеринга, заставляя функцию изменять ссылку только при изменении некоторых зависимостей. Вы должны использовать его, когда функция является зависимостью от побочного эффекта, например, useEffect.

useMemo