Today My React Mindset Completely Changed — Reusable Components & Composition

Today I experienced one of those moments where you stop and say:

“Wait… THIS is amazing. Why didn’t I know this earlier?”

While following my React course, I learned how to treat a component like a single reusable box, instead of creating multiple similar components for similar UI sections.

And honestly — this lesson alone changed how I see React.

🧠 The Big Realization: One Reusable Box Component

Earlier, my app had two different components doing almost the same thing:

• One box for movies list
• One box for watched movies

Same structure. Same toggle logic. Same UI behavior.

Today I learned something powerful:

👉 If the structure is the same, the component should be the same.

So instead of ListBox and WatchedBox, I created one reusable Box component and passed different content inside it using children.

That’s it.
Simple.
Clean.
Powerful.

This is not just refactoring — this is thinking in React.

🧩 Component Composition (The “Aha!” Moment)

This part blew my mind.

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

<Box>
  <WatchedMoviesSummary watched={watched} />
  <WatchedMovieList watched={watched} />
</Box>

The Box component doesn’t care what it renders. It only controls:

layout

toggle logic

UI behavior

The content is injected from outside.

This is component composition, and now I finally understand why people say:

“Composition is React’s real superpower.”

📈 Beginner → Intermediate Territory

My instructor mentioned that this concept sits in intermediate React territory.

And I can feel it.

My thinking has shifted from: ❌ “How do I make this work?”

to: ✅ “How do I design this cleanly?”

If this is intermediate React, I honestly can’t wait to enter the advanced territory — because now I know the concepts are not about more code, but better thinking.

🛠 Code Improvement Summary

What I improved today:

Removed duplicate components

Created a single reusable Box component

Used children instead of hardcoded UI

Reduced complexity

Made the code more scalable and readable

Small change — huge impact.

⭐ What’s Next?

I’ve already started building a Star Rating component today. Step by step, the course is pushing me closer to real-world React patterns.

Inshallah, I’ll complete the course — and with this new mindset, every component I write from now on will be cleaner, smarter, and more reusable.