async-await react

https://www.robinwieruch.de/react-hooks-fetch-data

useEffect(() => {
  let didCancel = false;

  async function fetchMyAPI() {
    let url = 'http://something/' + productId;
    let config = {};
    const response = await myFetch(url);
    if (!didCancel) { // Ignore if we started fetching something else
      console.log(response);
    }
  }  

  fetchMyAPI();
  return () => { didCancel = true; }; // Remember if we start fetching something else
}, [productId]);


~~~~~~~~~~~~~~~~~~

useEffect(() => {
  let didCancel = false;

  async function fetchMyAPI() {
    let url = 'http://something/' + productId;
    let config = {};
    const response = await myFetch(url);
    if (!didCancel) { // Ignore if we started fetching something else
      console.log(response);
    }
  }  

  fetchMyAPI();
  return () => { didCancel = true; }; // Remember if we start fetching something else
}, [productId]);

~~~~~~~~~

useEffect(() => {
  async function fetchMyAPI() {
    let url = 'http://something/' + productId;
    let config = {};
    const response = await myFetch(url);
    console.log(response);
  }  

  fetchMyAPI();
}, [productId]);

~~~~~~~~~

useEffect(() => {
  let didCancel = false;

  async function fetchMyAPI() {
    let url = 'http://something/' + productId;
    let config = {};
    const response = await myFetch(url);
    if (!didCancel) { // Ignore if we started fetching something else
      console.log(response);
    }
  }  

  fetchMyAPI();
  return () => { didCancel = true; }; // Remember if we start fetching something else
}, [productId]);

~~~~~~~~~~~~~

// Elsewhere
async function fetchWidgets() {
  return await fetch('./api/widgets').then(r => r.json())
}

// In my component:
function MyComponent() {
  const [widgets, setWidgets] = useState([]);
  // Need another async wrapper function to close over `setWidgets`?
  useEffect(() => (async () => setWidgets(await fetchWidgets()))());
  
 ~~~~~~~~~~~~~~~~
 
 function MyComponent() {
  const [widgets, setWidgets] = useState([]);
  async function unnecessaryApiWrapperClosureThatAddsLayersOfIndirection() {
     setWidgets(await fetchWidgets());
  }
  useEffect(() => unnecessaryApiWrapperClosureThatAddsLayersOfIndirection());
 
 ~~~~~~~~~~~~~~~
 useEffect(() => (async () => { 
  try { 
    setWidgets(await fetchWidgets());
  catch e {
    setError(e);
  }
})());