Search⌘ K
Home
Courses
The Road to React: The One with Hooks

Async/Await in React (Advanced)

Explore how to handle asynchronous data in React using async await syntax. Understand how to refactor promise-based code into cleaner async functions with proper error handling through try and catch blocks, enhancing your ability to manage data fetching effectively in React applications.

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:

Node.js
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]);
  ...
};

To use async/await, our function requires ...