Ответ 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

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