Synchronizing Asynchronous Data Fetching with a Stale Response Flag

function UserProfile({ userId }) {
  const [userData, setUserData] = React.useState(null);
  const [fetchError, setFetchError] = React.useState(null);
 
  React.useEffect(() => {
    let isCurrent = true;
 
    async function loadUser() {
      try {
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) throw new Error(`HTTP status: ${response.status}`);
        const data = await response.json();
        if (isCurrent) {
          setUserData(data);
        }
      } catch (err) {
        if (isCurrent) {
          setFetchError(err.message);
        }
      }
    }
 
    loadUser();
 
    return () => {
      isCurrent = false;
    };
  }, [userId]);
 
  return <div>{fetchError ? `Error: ${fetchError}` : userData?.name}</div>;
}