The Road to React: The One with Hooks/

...

/

Async/Await in React (Advanced)

Async/Await in React (Advanced)

Learn about the alternative syntax for handling promises: async/await.

We'll cover the following...

You’ll work with asynchronous data often in React, so it’s good to know the alternative syntax for handling promises: async/await. The following refactoring of the handleFetchStories function without error handling shows how:

Press + to interact
const App = () => {
  ...
  const handleFetchStories = React.useCallback(async () => {
    dispatchStories({ type: 'STORIES_FETCH_INIT' });
    const result = await axios.get(url);
    dispatchStories({
      type: 'STORIES_FETCH_SUCCESS',
      payload: result.data.hits,
    });
  }, [url]);
  ...
};
...