Introduction

In React, the usual pattern is simple: fetch data in a parent component, store it in state, and pass the result down to child components as props. The important part is not the prop itself, but how you handle loading, errors, and the first render before the request has finished.

Fetch in the Parent and Pass the Result Down

The parent component is usually the right place to own the AJAX request because it controls when data is loaded and how the UI should react to loading or failure.

1import { useEffect, useState } from "react";
2
3function PostsPage() {
4  const [posts, setPosts] = useState([]);
5  const [loading, setLoading] = useState(true);
6  const [error, setError] = useState(null);
7
8  useEffect(() => {
9    let cancelled = false;
10
11    async function loadPosts() {
12      try {
13        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
14        if (!response.ok) {
15          throw new Error("Request failed");
16        }
17
18        const data = await response.json();
19        if (!cancelled) {
20          setPosts(data.slice(0, 5));
21        }
22      } catch (err) {
23        if (!cancelled) {
24          setError(err.message);
25        }
26      } finally {
27        if (!cancelled) {
28          setLoading(false);
29        }
30      }
31    }
32
33    loadPosts();
34    return () => {
35      cancelled = true;
36    };
37  }, []);
38
39  return <PostsList posts={posts} loading={loading} error={error} />;
40}
41
42function PostsList({ posts, loading, error }) {
43  if (loading) return <p>Loading posts...</p>;
44  if (error) return <p>Error: {error}</p>;
45
46  return (
47    <ul>
48      {posts.map((post) => (
49        <li key={post.id}>{post.title}</li>
50      ))}
51    </ul>
52  );
53}
54
55export default PostsPage;

The parent owns the data-fetching lifecycle. The child only cares about rendering the props it receives.

Keep Children Presentational When Possible

A good rule is to let the parent manage data and let the child focus on presentation. This makes the child easier to reuse and easier to test because it does not need to know anything about fetch, endpoints, or loading strategy.

You can make the child even more focused by giving it only the data it actually needs:

1function PostCard({ title, body }) {
2  return (
3    <article>
4      <h2>{title}</h2>
5      <p>{body}</p>
6    </article>
7  );
8}
9
10function PostsList({ posts }) {
11  return (
12    <section>
13      {posts.map((post) => (
14        <PostCard key={post.id} title={post.title} body={post.body} />
15      ))}
16    </section>
17  );
18}

This reduces coupling. PostCard does not need the full API response shape if it only renders two fields.

Handle the Initial Empty State Explicitly

AJAX data is not available on the first render, so the child must be able to render safely with an empty array, null, or loading flags. This is one of the most common places where React beginners hit runtime errors.

For example, this is fragile:

function PostsList({ posts }) {
  return <p>{posts[0].title}</p>;
}

If posts is still empty, the component crashes. A safer version checks the state first:

1function PostsList({ posts }) {
2  if (posts.length === 0) {
3    return <p>No posts available.</p>;
4  }
5
6  return <p>{posts[0].title}</p>;
7}

Passing data as props is easy. Passing data as props safely is what makes the UI stable.

Common Pitfalls

One common mistake is fetching in both the parent and the child. That duplicates network logic, complicates state flow, and makes it harder to know which component owns the data.

Another problem is passing data before deciding what the loading UI should look like. A child that assumes the prop is always populated will often fail on the first render or after a network error.

Developers also sometimes pass the entire response object through many nested components even though only one small field is needed. That makes prop interfaces noisy and encourages accidental prop drilling. Pass the smallest useful shape instead.

Finally, remember to guard against setting state after unmount in long or cancellable requests. The cleanup flag in the example keeps the component from updating after it has been removed.

Summary

• Fetch data in the parent, store it in state, and pass the result to children as props.
• Keep child components focused on rendering rather than networking.
• Design for loading, error, and empty states from the start.
• Pass only the fields a child actually needs instead of the entire API response.
• Clean up asynchronous effects so unmounted components do not try to update state.