Async Effect Callback (ARCH3301)

Key typescript.react.async-effect · Severity error · Category async

React: flags useEffect/useLayoutEffect callbacks declared async - they return a Promise where React expects a cleanup function.

Incorrect

useEffect(async () => {
  setOrders(await api.orders());
}, []);

Correct

useEffect(() => {
  let active = true;
  api.orders().then(orders => { if (active) setOrders(orders); });
  return () => { active = false; };
}, []);