Build a Like Button

Question

Build a Like Button

Accepted Answer

## Building a Like Button in React

**Mental model:** A like button toggles a boolean and adjusts a count. The interesting version is *optimistic*: flip the UI immediately, fire the request, and roll back if it fails. Derive the displayed count from a base count plus the local liked state so the two never disagree.

### Step 1 — Liked + base count
Keep the server's count separate from the optimistic delta.

```jsx
const [liked, setLiked] = useState(false);
const [count, setCount] = useState(initialCount);
```

### Step 2 — Toggle optimistically
Update both immediately on click.

```jsx
const toggle = () => {
  setLiked((l) => !l);
  setCount((c) => c + (liked ? -1 : 1));
};
```

### Step 3 — Persist and roll back on failure
Fire the request after the optimistic update; revert if it rejects.

```jsx
try { await api.like(id, !liked); }
catch { setLiked(liked); setCount(count); } // restore previous
```

### Step 4 — Reflect state + animate
Swap the icon/colour and add a quick "pop" on li

Build a Like Button

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)