Optimistic vs. Pessimistic Trade-offs

import { useState } from "react";

async function followUser(id: string): Promise<void> {
  await new Promise((r) => setTimeout(r, 800));
  if (Math.random() < 0.1) throw new Error("failed");
}

// Fully pessimistic
export function PessimisticFollow({ userId }: { userId: string }) {
  const [following, setFollowing] = useState(false);
  const [loading, setLoading] = useState(false);

  async function handleFollow() {
    setLoading(true);
    try {
      await followUser(userId);
      setFollowing((v) => !v);
    } finally {
      setLoading(false);
    }
  }

  return (
    <button onClick={handleFollow} disabled={loading}>
      {loading ? "..." : following ? "Following" : "Follow"}
    </button>
  );
}

// Partially optimistic
export function PartialFollow({ userId }: { userId: string }) {
  const [following, setFollowing] = useState(false);
  const [pending, setPending] = useState(false);

  async function handleFollow() {
    const prev = following;
    setFollowing(!prev);
    setPending(true);
    try {
      await followUser(userId);
    } catch {
      setFollowing(prev);
    } finally {
      setPending(false);
    }
  }

  return (
    <button onClick={handleFollow}>
      {following ? "Following" : "Follow"}
      {pending && <span style={{ marginLeft: 4, opacity: 0.5 }}>•</span>}
    </button>
  );
}

// Fully optimistic
export function OptimisticFollow({ userId }: { userId: string }) {
  const [following, setFollowing] = useState(false);

  async function handleFollow() {
    const prev = following;
    setFollowing(!prev);
    try {
      await followUser(userId);
    } catch {
      setFollowing(prev);
    }
  }

  return (
    <button onClick={handleFollow}>
      {following ? "Following" : "Follow"}
    </button>
  );
}