Snippet

Async Data Fetching with Error Handling in useEffect

When fetching data in React, use an inner async function inside useEffect wrapped in a try/catch block. This allows you to handle network failures or HTTP errors gracefully by updating dedicated error state instead of leaving the application in an unhandled failure state.

snippet.js

javascript

import { useState, useEffect } from 'react';
 
function UserProfile({ userId }) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    async function loadUser() {
      try {
        const res = await fetch(`/api/users/${userId}`);
        if (!res.ok) throw new Error('Failed to load');
        const json = await res.json();
        setData(json);
      } catch (err) {
        setError(err.message);
      }
    }
    loadUser();
  }, [userId]);
 
  if (error) return <p>Error: {error}</p>;
  return <div>{data ? data.name : 'Loading...'}</div>;
}

react

Breakdown

async function loadUser() {

Declares an asynchronous helper function inside the effect callback.

if (!res.ok) throw new Error('Failed to load');

Checks the HTTP response status and throws an error for failed responses like 404 or 500.

} catch (err) {

Catches any network or parsing exceptions and routes them to local state.

if (error) return <p>Error: {error}</p>;

Renders an informative error message to the user if data loading failed.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Async Data Fetching with Error Handling in useEffect

Related