javascript 44 lines · 7 steps

Optimistic like buttons in Next.js

A client component that flips the UI instantly with useOptimistic, then reconciles with a server action.

Explained by highlit

Next.js Intermediate optimistic-ui react-hooks server-actions transitions client-components

1'use client';
2 
3import { useOptimistic, useTransition } from 'react';
4import { toggleLike } from '@/app/actions/likes';
5 
6export function LikeButton({ postId, initialLiked, initialCount }) {
const [isPending, startTransition] = useTransition();
const [optimistic, setOptimistic] = useOptimistic(
  { liked: initialLiked, count: initialCount },
  (state, liked) => ({
    liked,
    count: state.count + (liked ? 1 : -1),
  })
);
15 
function handleClick() {
  const nextLiked = !optimistic.liked;
  startTransition(async () => {
    setOptimistic(nextLiked);
    await toggleLike(postId, nextLiked);
  });
}
23 
return (
  <button
    type="button"
    onClick={handleClick}
    disabled={isPending}
    aria-pressed={optimistic.liked}
    className="flex items-center gap-1.5 text-sm font-medium disabled:opacity-60"
  >
    <svg
      viewBox="0 0 24 24"
      className={`h-5 w-5 transition-colors ${
        optimistic.liked ? 'fill-red-500 stroke-red-500' : 'fill-none stroke-current'
      }`}
      strokeWidth={2}
    >
      <path d="M12 21s-7.5-4.6-10-9.3C.7 8.9 2.2 5.5 5.5 5.5c2 0 3.4 1.2 4.5 2.8 1.1-1.6 2.5-2.8 4.5-2.8 3.3 0 4.8 3.4 3.5 6.2C19.5 16.4 12 21 12 21z" />
    </svg>
    <span>{optimistic.count}</span>
  </button>
);
44}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1useOptimistic lets you render a provisional state that automatically reverts if the underlying data doesn't confirm it.
2Wrapping a server action in startTransition keeps the UI responsive and exposes a pending flag for disabling controls.
3Deriving both the icon fill and count from one optimistic value keeps the whole button visually consistent during the round trip.

Related explainers

javascript

const express = require('express');
const router = express.Router();
const { pool } = require('../db');
const redis = require('../redis');

Building a health check endpoint in Express

health-check timeouts promise-race

Intermediate 9 steps

javascript

'use client';
 
import { useEffect } from 'react';
import * as Sentry from '@sentry/nextjs';

How a Next.js error boundary recovers

error-boundary error-handling observability

Intermediate 8 steps

javascript

const MAX_BATCH_SIZE = 20;
const FLUSH_INTERVAL = 5000;
const ENDPOINT = '/api/analytics';

Batching analytics events in the browser

batching buffering sendbeacon

Intermediate 10 steps

javascript

export function diffIds(current, desired) {
  const currentSet = new Set(current);
  const desiredSet = new Set(desired);

Diffing sets to sync group membership

set-operations diffing transactions

Intermediate 8 steps

javascript

class HistoryStack {
  constructor(initial = '', limit = 100) {
    this.past = [];
    this.present = initial;

Building an undo/redo history stack

undo-redo state-management debouncing

Intermediate 7 steps

javascript

import { useState, useCallback, useRef } from 'react';
 
function LikeButton({ postId, initialLiked, initialCount }) {
  const [liked, setLiked] = useState(initialLiked);