Handling Async Errors with try-catch in Hooks

Snippet

Handling Async Errors with try-catch in Hooks

Intermediate React development requires robust error handling within async effects to manage failed network requests and UI states.

snippet.js
javascript
useEffect(() => {
  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/data');
      if (!response.ok) throw new Error('Network response was not ok');
      const json = await response.json();
      setData(json);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  fetchData();
}, []);

react

Breakdown

try { ... } catch (err)

Standard block for catching exceptions during asynchronous execution.

if (!response.ok) throw ...

Manually triggers an error for HTTP statuses like 404 or 500.

finally { setLoading(false) }

Ensures the loading state is reset regardless of whether the call succeeded or failed.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Handling Async Errors with try-catch in Hooks

Related