Реакция: useEffect против useMemo против useState

Ваши пункты в основном верны, небольшое уточнение:

использование состояния вызывает повторную визуализацию при вызове метода setState (возвращается второй элемент в массиве). Он не имеет никаких зависимостей, таких как useMemo или useEffect.

useMemo пересчитывает значение только в том случае, если элементы в его массиве зависимостей изменяются (если зависимостей нет, т.е. массив пуст, он будет пересчитываться только один раз). Если массив не указан, он будет пересчитываться при каждом рендеринге. Вызов функции не вызывает повторного рендеринга. Также он запускает в течение при рендеринге компонента, а не раньше.

использованиеЭффект вызывается после при каждом рендеринге, если элементы в его массиве зависимостей изменились или массив пропущен. Если массив пуст, он будет запущен только один раз при начальном монтировании (и размонтирован, если вы вернете функцию очистки).

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

• Возвращаемое значение useEffect(callback, [dependency]) равно void и выполняется после render().
• Возвращаемое значение useMemo(callback, [dependency]) НЕ void, а запомненное значение, и оно выполняется ВО ВРЕМЯ render().

useEffect() может дать ту же оптимизацию, что и useMemo(), при следующих обстоятельствах:

• Переменная состояния, используемая в дорогостоящих вычислениях (например, count1), является единственной зависимостью useEffect.
• Когда мы не возражаем хранить дорого вычисляемое значение в переменной состояния.

const [count1, setCount1] = useState(0);
const [expensiveValue, setExpensiveValue] = useState(null);
useEffect(() => {
    console.info("I am performing expensive computation");
    setExpensiveValue(((count1 * 1000) % 12.4) * 51000 - 4000);
  }, [count1]);   

• Разница лишь в том, что useEffect() делает дорогостоящее значение доступным после render(), а useMemo() делает значение доступным во время render().
• В большинстве случаев это не имеет значения, потому что, если это значение было рассчитано для рендеринга в пользовательском интерфейсе, useEffect() и useMemo() оба сделают значение доступным до того, как браузер завершит рисование.

useMemo Используется для запоминания вычислений/значений, которые принадлежат компоненту, но не обязательно его состоянию, например. проверки, методы, которые полагаются на компонент и должны возвращать значение;

  const validEmail = React.useMemo(() => validateEmail(email), [email])
  /* Now use 'validEmail' variable across the component, 
     whereas 'useEffect' return value is void and only used for unmounting duties, 
     like unsubscribing from subscription e.g. removeInterval*/

из документов:

Remember that the function passed to useMemo runs during rendering. Don’t do anything there that you wouldn’t normally do while rendering. For example, side effects belong in useEffect, not useMemo.

useEffectПобочные эффекты:

Mutations, subscriptions, timers, logging, and other side effects

setState's setTimeout' setInterval' ref назначения, вызовы API или все, что не выполняет тяжелых вычислений, больше относится сюда.

Также помните, что за оптимизацию приходится платить, поэтому React предлагает использовать useMemo только тогда, когда необходима мемоизация/оптимизация, а в остальных случаях полагаться на useEffect, когда это необходимо:

You may rely on useMemo as a performance optimization, not as a semantic guarantee.

In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without useMemo — and then add it to optimize performance.

[state, setState] = useState()то есть для обновления данной переменной состояния, которая остается стабильной во время повторного рендеринга, и вызов прикрепленного к ней setState запускает повторный рендеринг. Назначение этого крючка не очень связано с двумя вышеупомянутыми крючками.