2
Step 1
import { useState, useEffect } from 'react';
export function User() {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch('/api/user')
.then(r => r.json())
.then(u => {
setUser(u);
setLoading(false);
setError(null);
})
.catch(e => {
setUser(null);
setLoading(false);
setError(e);
});
}, []);
if (loading) return <div>Loading...</div>;
if (error) return <div>Error</div>;
return <div>{user.name}</div>;
}
26/30 lines
Step 2
import { useQuery } from '@tanstack/react-query';
export function User() {
const { data: user, isLoading, error } = useQuery({
queryKey: ['user'],
queryFn: () => fetch('/api/user').then(r => r.json())
});
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error</div>;
return <div>{user.name}</div>;
}
12/30 lines
Animation:
Background:
0ms97650ms