Fetching Data
RE · useEffectsyntax
useEffect(() => {
let ignore = false;
async function load() {
const data = await fetchData();
if (!ignore) setState(data);
}
load();
return () => { ignore = true; };
}, [deps]);example
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
let ignore = false;
setLoading(true);
async function loadUser() {
const response = await fetch(`/api/users/${userId}`);
const data = await response.json();
if (!ignore) {
setUser(data);
setLoading(false);
}
}
loadUser();
return () => { ignore = true; };
}, [userId]);
if (loading) return <p>Loading...</p>;
return <div>{user.name}</div>;
}Note The ignore flag prevents setting state on an unmounted component or after a stale request. In React 19, consider using the use() hook with Suspense for data fetching instead of this pattern.