DEV Community

Cover image for ⭐ Today I Finally Understood React Components — Categories, Splitting, and Writing Cleaner Code
Usama
Usama

Posted on

⭐ Today I Finally Understood React Components — Categories, Splitting, and Writing Cleaner Code

#react #frontend #cleancode #webdev

Today was one of those days where something finally clicked.

I didn’t just write components — I understood why they exist, how to group them, and how to think like a real React developer.

I took a single huge component from my course and broke it into clean, reusable components.

But the real win was learning the mindset behind component design.

🎯 1. Components Fall Into Clear Categories

Earlier everything felt like “just another component.”

Today I learned that React components fall into 3 main categories:

1️⃣ UI Components (Pure Visuals)

They only display data — no state.

function Logo() {
  return <h1>🎬 usePopcorn</h1>;
}
Enter fullscreen mode Exit fullscreen mode

2️⃣ Stateful Components

They control behavior with state.

function SearchBar() {
  const [query, setQuery] = useState("");
  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
}
Enter fullscreen mode Exit fullscreen mode

3️⃣ Layout / Wrapper Components

They just structure the UI.

function MainLayout({ children }) {
  return <main>{children}</main>;
}
Enter fullscreen mode Exit fullscreen mode

🧩 2. Splitting Components Should Follow a Rule

My rule:

One component = One meaningful piece of UI

Using this rule, my final structure became:

App
├── NavBar
│   ├── Logo
│   ├── Search
│   └── NumResults
├── Main
│   ├── ListBox
│   │   ├── MovieList
│   │   └── Movie
│   └── WatchedBox
│       ├── WatchedMoviesSummary
│       ├── WatchedMovieList
│       └── WatchedMovie
Enter fullscreen mode Exit fullscreen mode

The result was clean, easy to navigate, and future-proof.

💡 3. The Rule That Changed Everything

⭐ Medium components are the sweet spot.

Too big = messy

Too small = confusing

Medium size = perfect

This made my code 10× easier to understand and maintain.

📬 4. Finally Understood Prop Drilling

Prop drilling means passing data multiple levels down:

<Main movies={movies}>
  <MovieList movies={movies} />
</Main>

Not bad in small apps.
But now I understand why Context is used later.
Enter fullscreen mode Exit fullscreen mode

🏗 5. Component Composition = React Superpower 

<NavBar>
  <Search />
  <NumResults />
</NavBar>
Enter fullscreen mode Exit fullscreen mode

The parent doesn't know which children it receives.
This makes components flexible and reusable like LEGO blocks.

🎨 6. Small Styling Improvements Matter

Today I improved:

spacing system

mobile-first layout

cleaner navbar

responsive movie sections

better toggle button behavior

Small CSS changes made everything feel polished.

Top comments (0)