Thinking in Components: How to Structure a React App

May 26, 2026 · 8 min read

← All articles

A React app is a tree of components. The hardest part isn't the syntax — it's deciding where the boundaries go and where state lives. Get those right and your app stays readable as it grows.

Split the UI into components

Start from the design and draw boxes around pieces that represent one thing: a search bar, a product row, a price tag. A good component does one job and has a name that describes it. If a component is doing three jobs, that's three components.

function ProductPage() {
  return (
    <>
      <SearchBar />
      <ProductTable />
    </>
  );
}

Props flow down

Components receive data through props — read-only inputs passed from the parent. A child should never change its own props; it renders based on them. This one-way flow makes data easy to trace: to find where a value comes from, you look up the tree. (New to the props/state distinction? Props vs state covers it.)

function ProductRow({ name, price }) {
  return <tr><td>{name}</td><td>{price}</td></tr>;
}

Decide where state lives

For each piece of state, ask: which components depend on it? Put the state in their closest common parent. If only one component needs it, keep it local. If two siblings need it, "lift" it to their parent and pass it down as props. This is called lifting state up.

function FilterableList() {
  const [query, setQuery] = useState('');
  return (
    <>
      <SearchBar query={query} onChange={setQuery} />
      <List query={query} />
    </>
  );
}

Avoid premature abstraction

Don't split a component into ten tiny ones before you need to. Build it, let it grow a little, and extract a component when a clear, reusable piece emerges. The same applies to "shared" components — duplication is cheaper than the wrong abstraction.

Key takeaways

• One component, one responsibility, one clear name.
• Data flows down through props; children never mutate props.
• Put state in the closest common parent of the components that use it.
• Extract components when a reusable piece is obvious — not before.

Want the structured path? Explore the React roadmap or browse more articles.