Simplify Async with React's New use() Hook

The Problem with Current Async in React

For a long time, fetching data in React components has been a bit of a dance. We’ve relied on useEffect combined with useState and often some loading and error states. This pattern, while functional, can get repetitive and a little verbose, especially when you have multiple asynchronous operations happening in a single component.

Consider a typical scenario:

1
import React, { useState, useEffect } from 'react';
2

3
function UserProfile({ userId }) {
4
  const [user, setUser] = useState(null);
5
  const [loading, setLoading] = useState(true);
6
  const [error, setError] = useState(null);
7

8
  useEffect(() => {
9
    async function fetchUser() {
10
      try {
11
        const response = await fetch(`/api/users/${userId}`);
12
        if (!response.ok) {
13
          throw new Error(`HTTP error! status: ${response.status}`);
14
        }
15
        const data = await response.json();
16
        setUser(data);
17
      } catch (err) {
18
        setError(err);
19
      } finally {
20
        setLoading(false);
21
      }
22
    }
23

24
    fetchUser();
25
  }, [userId]);
26

27
  if (loading) {
28
    return <div>Loading user...</div>;
29
  }
30

31
  if (error) {
32
    return <div>Error loading user: {error.message}</div>;
33
  }
34

35
  return (
36
    <div>
37
      <h1>{user.name}</h1>
38
      <p>{user.email}</p>
39
    </div>
40
  );
41
}
42

43
export default UserProfile;