Is there a benefit in React useEffect to resolving promises like this?

Question

I get warnings in my WebStorm IDE that tell me that I'm not resolving promises in useEffect. I can make that warning go away but simply using a then but I'm not sure I've added anything of value.

Would the code below where I've added a then that does nothing be considered a good thing to do or a waste of time?

useEffect(() => {
    async function getData() {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      try {
        //throw "crash"
        setNotesData(notes);
      } catch (e) {
        setNotesDataError(e);
      }
    }
    getData().then(() => {});
  }, []);

JetBrains Warning Message: Promise returned from getData is ignored

A good thing would be to provide the exact warning that WebStorm gives you, so that people find it later. — Drarig29, Jul 26 '21 at 13:42
You could use [useAsyncEffect](https://github.com/rauldeheer/use-async-effect), though it may be overkill for your usage. — edemaine, Jul 26 '21 at 13:51
Looking at useAsyncEffect, I'm wondering why it's not implemented using the return of useEffect. Seems like the author is trying to replicated that same functionality, though worries me because there is a lot of magic in React components and creation and destroying — Pete, Jul 26 '21 at 15:16
@Pete I think all the hoop-jumping is to handle the case where the async function returns after the component unrenders. You can't do the necessary cleanup in this case using the `useEffect` return function. — edemaine, Jul 26 '21 at 15:26
@edemaine see the edit in my answer. That's the only "cleanup" he needs to do — Drarig29, Jul 26 '21 at 15:35

Drarig29 · Answer 1 · 2021-07-26T15:35:30.393

The warning you are getting isn't a warning about React specifically. This is a general JavaScript warning.

And it is right because it reminds you that:

You might be forgetting something
You can lose the result of the promise
If the promise rejects, you will have an unhandled promise rejection

But here, with the React useEffect() hook, this is usual to proceed like this (see this answer for example).

And you have a try catch so the promise shouldn't be rejected. It is safe to ignore this warning and to remove your .then(() => {}) which just clutters your code. Someone could think this is actually needed and could copy-paste it everywhere in your project.

You can even disable this warning if you want, maybe only for .jsx files if possible.

If you need to use the clean up function to prevent changing the state when the component is unmounted, you can do the following:

const isMounted = useRef(true)

useEffect(() => {
    async function getData() {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      try {
        //throw "crash"
        isMounted.current && setNotesData(notes);
      } catch (e) {
        isMounted.current && setNotesDataError(e);
      }
    }
    getData();
    return () => isMounted.current = false
  }, []);

Is there a benefit in React useEffect to resolving promises like this?

1 Answers1