Star Rating
Problem statement
A Star Rating component is a staple of product pages, review systems, and feedback forms. Your task is to build a fully interactive star rating widget in React that allows a user to click a star to set their rating, and hover over stars to preview what the rating will look like before they commit to a selection.
The hover-preview behavior is the core of this question. It requires you to think carefully about two related states — what the user has actually selected versus what they are currently previewing — and how to derive what's displayed on screen from both of them simultaneously.
Your component should render 5 stars, support hover preview, commit a rating on click, allow toggling off a rating by clicking the same star again, and call an onChange callback with the new value.
Requirements & constraints
- Render 5 clickable star buttons in a row
- Stars fill up to and including the selected star on click
- Hovering over a star previews that rating — fills stars up to the hovered star
- Moving the mouse off the stars entirely reverts to the selected rating
- Clicking the currently selected star deselects it (toggles back to 0)
- Passes the new rating value to an optional onChange callback prop
How to approach Star Rating
The strategy an interviewer expects you to reach for.
Problem Understanding Star Rating looks like a one-liner until you think carefully about the hover preview. You need to show the user what their rating will be before they click — a preview state. But you also need to preserve what they've already selected. These are two different things, and they need to coexist in your component's state.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.