Cleaning up asynchronous render side effects

asyncCleanup.jsx

useEffect(() => {
  const pFoo = getFoo().then(foo => /* do somthing with our async foo, making sure to return it */);
  return () => pFoo.then(foo => /* cleanup here will always run after we have gotten our foo and used it */);
});

// This is one of the few cases where it makes sense to use raw promises instead of async/await
// The power of promises is that you can compose asynchronous logic asynchronously
// Afaik that's not possible with async/await?