Compose components

Components become useful when they compose into a larger interface. A page is rarely one giant function. It is a tree of smaller pieces that each do one job well.

function Article() {
  return (
    <article>
      <h2>Forms are an HTTP interface</h2>
      <p>The browser sends named values to a URL.</p>
    </article>
  )
}

function Page() {
  return (
    <>
      <Header />
      <main>
        <Article />
      </main>
    </>
  )
}

Page controls the page structure. Article controls one content item. Header can be reused across pages.

Composition keeps data flow visible. A parent can pass data down through props and receive events through callback props. The child does not need to know the whole application.

Split a component when a piece has a clear responsibility, repeats, owns state, or is easier to test on its own. Keep one-off markup together when another file and prop interface would add more ceremony than clarity.

Do not call a component as Article(). Use <Article /> so React can track its position, Hooks, and state as part of the tree. Calling it like a plain function skips React’s bookkeeping.

My advice is to name components after what they represent, not after where they appear on the page. Article can live on a blog page or inside a dashboard card.

Nesting can go several levels deep. A Page renders a Sidebar, which renders a NavItem, and each level can stay small because it only knows its immediate children.

File names usually match the component name so imports stay obvious: Article.jsx exports Article.

Export each component from its file, import it where needed, and keep the tree readable from the root page downward.

Move the article text into props next. If the prop list becomes awkward, reconsider where the component boundary belongs.