Build a Like Button | Interview Question

Q: Build a Like Button

**Target Audience:** Beginners preparing for a frontend machine coding round. You know basic React state; promises and async code are still a little fuzzy. **Difficulty:** Easy > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. All code comes from the runnable solution next to this tutorial, and the output in section 6 was produced by actually running it on React 19.3.1. ## 1. Why This Even Matters — A Story First You order a coffee and the barista says "coming right up" and starts making it before your card payment has gone through. Nine times out of ten the payment works and you never notice the wait. Once in a while the card is declined, and the barista has to stop, pour the coffee away, and tell you. That is **optimistic** service: assume success so the customer never waits, and have a clean plan for the rare failure. A like button works the s

The problem

Question presented to candidate: "Build the like button you see under a social media post. Clicking it should feel instant, even though the like is saved on a server that takes a moment and sometimes fails. If the save fails, put things back the way they were and tell the user. You can fake the server."

Requirements:

A Like button and a count ("41 likes"); clicking toggles liked or unliked and moves the count by one.
Optimistic update: the button and count change immediately, before the server answers.
A simulated API (a Promise that resolves or rejects after about 600 ms); a switch to force failures.
On failure, roll back to the exact previous state and show a message.
Ignore clicks while a save is in flight (or explain the alternative you choose).
Accessible toggle semantics and a small "pop" animation that respects reduced motion.

What a strong answer should cover:

Why optimistic UI: perceived speed, and the price you pay (handling failure).
A snapshot of the previous state taken before the update, restored in catch.
A guard for concurrent requests (a ref or plain variable, not state) and the trade-off versus "last click wins".
aria-pressed for a toggle button with a stable label, and a status live region for "Saving…" and errors.
Injecting the save function as a prop so the button is testable and reusable.

Clarifying questions expected:

"Can the user click again while a request is in flight? Should the last click win?"
"Does the server return the authoritative count I should reconcile with?"
"Should a failure retry automatically, or just inform the user?"

Code / implementation expected: Yes. A working component plus a fake API function, roughly 60-90 lines.

React
State
Animation

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners preparing for a frontend machine coding round. You know basic React state; promises and async code are still a little fuzzy. Difficulty: Easy

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. All code comes from the runnable solution next to this tutorial, and the output in section 6 was produced by actually running it on React 19.3.1.

1. Why This Even Matters — A Story First

You order a coffee and the barista says "coming right up" and starts making it before your card payment has gone through. Nine times out of ten the payment works and you never notice the wait. Once in a while the card is declined, and the barista has to stop, pour the coffee away, and tell you. That is optimistic service: assume success so the custo

The solution is hidden so you can try first

11 min read · 10 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import { useState } from "react";
import LikeButton from "./src/components/LikeButton";
import { saveLike } from "./src/api/api";

export default function App() {
  const [fail, setFail] = useState(false);
  return (
    <main className="page">
      <h1>Like Button</h1>
      <article className="post">
        <p>Shipped the new onboarding flow today. Feedback welcome!</p>
        <LikeButton
          initialLiked={false}
          initialCount={41}
          save={(liked) => saveLike(liked, fail)}
        />
      </article>
      <label className="sim">
        <input
          type="checkbox"
          checked={fail}
          onChange={(e) => setFail(e.target.checked)}
        />
        Simulate server failure
      </label>
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.