React Nested Components

What is Nested Components in React?

Nesting means one component rendering another inside its JSX. A React app is a tree of nested components with a single root, and data flows down that tree through props.

Why Nested Components matters

Nesting is how a page is assembled from parts: App renders Layout, Layout renders Header and Main, Main renders a JobList, which renders many JobCards.

Nested Components example

function App() {
  return (
    <Layout>
      <Header title="Internships" />
      <JobList jobs={jobs} />
      <Footer />
    </Layout>
  );
}

Key points to remember

• Define each component at module top level, never inside another component.
• Keep the tree shallow where you can — deep prop chains are a sign you need context or a different split.
• A parent re-render re-renders its children by default.

Common mistakes with Nested Components

• Declaring a child component inside the parent function — React sees a new component type each render and remounts the subtree, destroying its state.
• Passing a prop down through five layers that do not use it (prop drilling) instead of using context.