A star rating is small but tests hover-vs-committed state separation, accessibility, and using semantic elements.

Core implementation

function StarRating({ value = 0, onChange, max = 5, readOnly = false }) {
  const [hover, setHover] = useState(null);
  const display = hover ?? value;          // hover previews, value is committed

  return (
    <div role="radiogroup" aria-label="Rating">
      {Array.from({ length: max }, (_, i) => {
        const starValue = i + 1;
        return (
          <button
            key={starValue}
            type="button"
            role="radio"
            aria-checked={starValue === value}
            aria-label={`${starValue} star${starValue > 1 ? "s" : ""}`}
            disabled={readOnly}
            onClick={() => onChange?.(starValue)}
            onMouseEnter={() => !readOnly && setHover(starValue)}
            onMouseLeave={() => !readOnly && setHover(null)}
          >
            {starValue <= display ? "★" : "☆"}
          </button>
        );
      })}
    </div>
  );
}

The key design points

• Hover ≠ value. Keep a separate hover state; display = hover ?? value. Hovering previews a rating; clicking commits it. Conflating them means the rating changes just by mousing over — a classic bug.
• Real interactive elements — <button>s (or radio <input>s), not <div onClick>. You get keyboard, focus, and semantics for free.
• Accessibility — it's a single choice from N: role="radiogroup" + role="radio" with aria-checked, or a role="slider" with aria-valuenow/min/max. Each star labeled ("3 stars").
• Keyboard support — arrow keys to increase/decrease the rating, Enter/Space to commit.
• Read-only mode — for displaying ratings (no hover, no click, not focusable as inputs).
• Half-stars — if required: compute fill per star from a fractional value (e.g. clip-path or two overlaid layers); hover then snaps to halves based on cursor x-position within the star.
• Controlled vs uncontrolled — support value/onChange and a defaultValue.

The framing

"State is the committed value plus a separate hover state — display = hover ?? value — so hovering previews and clicking commits; merging them means the rating changes on mouseover, which is the classic bug. I render real <button>s, not divs, so keyboard and focus come free, and wire it up as a radiogroup of radios with aria-checked and per-star labels, plus arrow-key support. A readOnly mode handles the display case. Half-stars, if needed, are a fractional fill per star with hover snapping to halves by cursor position."