Fetching Data with useEffect

Learn how to fetch data from an API inside a useEffect hook.

Combine useEffect and fetch() to load data from APIs.

Fetching on Mount

const [blogs, setBlogs] = useState(null);

useEffect(() => {
  fetch("http://localhost:8000/blogs")
    .then(res => res.json())
    .then(data => {
      setBlogs(data);
    });
}, []);

Rendering Fetched Data

return (
  <div>
    {blogs && <BlogList blogs={blogs} title="All Blogs" />}
  </div>
);

We use blogs && to conditionally render only after data has loaded.