useEffect не может вызвать функцию напрямую?

Question

VersionA: useEffect(() => doRequest(), []);

VersionB:

useEffect(() => {
  doRequest();
}, []);

Я всегда думал, что обе версии абсолютно одинаковы, где VersionA - это ярлык, а VersionB позволяет делать больше чем одна команда внутри встроенной функции.

Однако, когда я использую VersionA, я нажимаю TypeError: func.apply is not a function, выброшенный Next JS

If I use syntax of VersionB, everything working fine. Wondering if anyone faced this before?

UPDATES The full code for my component

import { useEffect } from 'react';
import useRequest from '../../hooks/use-request';
import Router from 'next/router';

export default () => {
  const { doRequest } = useRequest({
    url: '/api/users/signout',
    method: 'post',
    body: {},
    onSuccess: () => Router.push('/'),
  });

  useEffect(() => doRequest(), []);
  return <div>Signing you out...</div>;
};

Answer 1

Это не совсем то же самое.

useEffect(() => doRequest(), []);

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

EDIT : как указано в @ 3limin4t0r, () => fn() совпадает с () => { return fn(); }:

useEffect(() => {
  doRequest();
}, []);

Имея тело функции и не возвращая что-либо явно, ваша функция неявно возвращает undefined, что нормально, если нечего очищать.

Answer 2

Об этом написано в официальных документах здесь .

Любая функция, возвращаемая из useEffect, используется для «очистки».

В вашем первом примере doRequest возвращает что-то отличное от undefined, которое React попытается вызвать как функцию для «очистки» при отключении компонента.

Пример useEffect с функцией очистки:

useEffect(() => {
  document.addEventListener("resize", handleResize);
  // This is a "clean up" function
  return () => {
    document.removeEventListener("resize", handleResize);
  };
}, []);

Пример useEffect без функции очистки. Обратите внимание, что это плохо, так как слушатель по-прежнему будет активироваться после размонтирования компонента.

useEffect(() => {
  document.addEventListener("resize", handleResize);
}, []);