useEffect promise throwing Typescript errors

Question

useEffect(login, [])

Where login returns a promise. I don't need the return, I just want it to fire.

Gives the following Typescript errors:

Argument of type '() => Promise<void>' is not assignable to parameter of type 'EffectCallback'.
  Type 'Promise<void>' is not assignable to type 'void | Destructor'.t

Yet, this does not throw errors:

useEffect(() => {
    login()
  }, [])

Why does the first throw TS errors?

Because login returns Promise<void>, not void or Destructor — Samathingamajig
– Samathingamajig, Commented May 12, 2022 at 0:06
Besides the arrow function, I now also use react-use useAsync just for that... — ghybs
– ghybs, Commented May 12, 2022 at 5:11

Marlom · Accepted Answer · 2022-06-04 16:31:10Z

2

It is technically different returns, while your login returns a promise, useEffect does expect the EffectCallback to be met, which is basically to return a function that is called once the component is being unmounted or void (nothing).

See more about useEffect here.

To give a more step-by-step type of answer:

useEffect accepts a function that is called EffectCallback in typescript terms.
That EffectCallback cannot by anything else than a plain function.
It should return void (nothing) or Destructor which is a plain function called once the component is being unmounted.

edited Jun 4, 2022 at 16:31

answered May 12, 2022 at 0:00

Marlom

7887 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

useEffect promise throwing Typescript errors

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related