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

2 min read
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;
0
Subscribe to my newsletter
Read articles from Valencia Miyeon Jang directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
