Async effect callbackAsync effect callback

Why it matters

React treats an effect's return value as its cleanup; an async callback returns a Promise, so cleanup never runs and errors go unhandled.

Fix

Define an async function inside the effect and call it; return a real cleanup function.

Credit

• 

  From the React team

  An effect callback must return a cleanup function or nothing; async work belongs in a function called from inside the effect.

References

• useEffect — ReactReact
• Synchronizing with Effects — ReactReact
• You Might Not Need an Effect — ReactReact

Related rules

• next/effect-cleanupEffect subscribes without cleanup
• next/fetch-in-effectData fetching in an effect