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

  useEffect(() => {
    let cancelled = false;

    Promise.all([
      fetchUser(userId),
      fetchUserPosts(userId)
    ])
      .then(([userData, postsData]) => {
        if (!cancelled) {
          setUser({ ...userData, posts: postsData });
        }
      })
      .catch((err) => {
        if (!cancelled) {
          setError(err.message);
        }
      })
      .finally(() => {
        if (!cancelled) {
          setLoading(false);
        }
      });

    return () => {
      cancelled = true;  // prevent state update after unmount
    };
  }, [userId]);

  if (loading) return <Spinner />;
  if (error) return <ErrorMessage message={error} />;
  return <UserCard user={user} />;
}
Async — Event Loop, Callbacks, Promises

Async — Event Loop, Callbacks, Promises
