React | Don’t Render User Data Before Handling Loading or Error

When fetching data in React, it’s tempting to jump straight into rendering. But if you try to access user before it’s loaded, things break fast.

In this example:

const { user_url, name } = user;

If user is still null (which it is initially), this line throws an error. That’s why the order matters:

if (isLoading) return <h2>Loading...</h2>;
if (isError) return <h2>There was an error...</h2>;
// only then:
const { user_url, name } = user;

By checking isLoading and isError first, we make sure the data’s ready before trying to use it. It’s a small pattern, but it keeps your components safe and your UI smooth.

✅ Full Example

import { useEffect, useState } from 'react';

const url = `https://test..com`

const UserFetchData = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [isError, setIsError] = useState(false);
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const resp = await fetch(url);
        if (!resp.ok) {
          setIsError(true);
          setIsLoading(false);
          return;
        }

        const user = await resp.json();
        setUser(user);
      } catch (error) {
        setIsError(true);
      }
      setIsLoading(false);
    };
    fetchUser();
  }, []);

  if (isLoading) {
    return <h2>Loading...</h2>;
  }
  if (isError) {
    return <h2>There was an error...</h2>;
  }

  const { user_url, name, company, bio } = user;
  return (
    <div>
      <img
        style={{ width: '150px', borderRadius: '20px' }}
        src={user_url}
        alt={name}
      />
      <h2>{name}</h2>
      <h4>works at {company}</h4>
      <p>{bio}</p>
    </div>
  );
};

export default UserFetchData;