I recently learned how to build a Star Rating component from a React course, and honestly, it changed how I think about components. Let me share what clicked for me.
1. The Beginning (Where I Was Confused)
When the instructor first showed the star rating component, I thought:
"Okay, so we just light up stars when clicked. Easy."
But then he asked: "What happens when you hover?"
And I realized... wait, there are actually two things happening here:
- Temporary hovering (just looking)
- Actual clicking (making a choice)
That's when I understood I'd been thinking about it wrong.
2. The Two-State Concept (This Was New to Me)
The course taught me something I hadn't thought of before:
You need TWO states:
-
rating→ the permanent choice -
tempRating→ the hover preview
Why this blew my mind:
Before this, I would've probably tried to do everything with one state. And I would've been stuck wondering why the hover was acting weird.
The instructor explained:
"Hover is temporary feedback. It should never overwrite the user's actual rating."
That one line made everything clear.
3. Understanding the Flow (From the Course)
The instructor drew this out on screen, and it finally made sense:
HOVER over star
↓
setTempRating(hovered number)
↓
Display updates immediately
MOUSE LEAVES
↓
setTempRating(0)
↓
Go back to showing the real rating
CLICK a star
↓
setRating(clicked number)
↓
Now that's saved permanently
Seeing it broken down like this helped me understand when each state changes and why.
4. The Logic I Learned
The course taught me this decision-making pattern:
For each star, ask:
"Should I be filled?"
↓
Is tempRating > 0? (someone hovering?)
↓
YES → Fill if star number <= tempRating
↓
NO → Fill if star number <= rating
This was explained as:
"Always show the temporary state if it exists. Otherwise, fall back to the permanent state."
Before learning this, I would've probably written way more complicated conditions.
5. Component Separation (A Pattern I Learned)
The instructor split it into two components:
StarRating - The parent
- Manages both states
- Has all the event handlers
- Controls the logic
Star - The child
- Just receives props
- Displays based on what it's told
- Fires onClick back to parent
What I learned:
"Keep state high, keep presentation low."
This pattern showed up again and again in other lessons. Now I recognize it everywhere.
6. Making It Flexible (Course Design Pattern)
The course showed how to make components reusable with props:
<StarRating
maxRating={5}
size={24}
color="#fcc419"
/>
What the instructor said:
"Don't hardcode values. Let the parent decide."
This taught me the difference between a "demo component" and a "real component" you'd actually use in projects.
7. Adding Little Details (From Course Examples)
The course included:
-
role="button"for accessibility - Hover cursor changes
- Click handlers
The instructor mentioned:
"These small things matter when real users interact with your app."
Before this course, I would've skipped these. Now I include them from the start.
8. What This Component Taught Me (Beyond Stars)
After building this with the course, I realized:
This wasn't really about stars.
It taught me:
- ✅ How to think about temporary vs permanent state
- ✅ When to split components and when not to
- ✅ How to trace data flow through user actions
- ✅ How to design props for reusability
Now when I see other components (sliders, toggles, tabs), I recognize the same patterns.
If you check a demo video click this link 🔗https://vt.tiktok.com/ZSPDEQc2N/
Top comments (1)
“Keep state high, keep presentation low” 👌 That pattern alone makes this a great learning example beyond just a star rating.