Best Practices for Fetching Data in React Call API on Page Load
https://www.dhiwise.com/post/best-practices-for-fetching-data-in-react-call-api-on-page-load
function Posts() {
2 const [posts, setPosts] = useState([]);
3 const [loading, setLoading] = useState(true);
4 const [error, setError] = useState(null);
5
6 useEffect(() => {
7 fetch('https://jsonplaceholder.typicode.com/posts')
8 .then(response => response.json())
9 .then(data => {
10 setPosts(data);
11 setLoading(false);
12 })
13 .catch(err => {
14 setError(err);
15 setLoading(false);
16 });
17 }, []);
18
19 if (loading) return <div>Loading...</div>;
20 if (error) return <div>Error: {error.message}</div>;
21
22 return (
23 <ul>
24 {posts.map(post => (
25 <li key={post.id}>{post.title}</li>
26 ))}
27 </ul>
28 );
29}
