Solution

You'll copy the text through the async Clipboard API, then hold one copied boolean that drives both the class and the label, resetting it after 2 seconds with a timer you can cancel.

The problem, in plain English

A copy button has two jobs: put the text on the clipboard, and reassure the user it worked. The reassurance is temporary — it should appear on success and disappear a couple of seconds later. The write is asynchronous (navigator.clipboard.writeText returns a Promise), and the "disappear later" part is a timer that must survive impatient, repeated clicks.

The mental model

copied is a single boolean. The green button and the Copied! text are not two things to sync — they're that one boolean, rendered two ways. The only real subtlety is the timer: each click starts a fresh 2s countdown, so you must cancel the previous one first, otherwise an old timer fires mid-window and reverts the label too early.

A first attempt

A common first try fires the timer without tracking it, and ignores that the write is async:

function handleCopy() {
  navigator.clipboard.writeText('npm install uiready'); // not awaited
  setCopied(true);
  setTimeout(() => setCopied(false), 2000); // timer id thrown away
}

It mostly looks right. But two things bite. First, copied flips to true whether or not the write actually succeeded — if the clipboard call rejects, you've lied to the user. Second, every click schedules a new independent timeout while the old ones keep running; click twice quickly and the first timer reverts the label one second into your second confirmation. You need to await the write and to hold the timer id so you can cancel it.

The working solution

import { useState, useRef } from 'react';
import './styles.css';

const SNIPPET = 'npm install uiready';

export default function App() {
  const [copied, setCopied] = useState(false);
  const timerRef = useRef<number | undefined>(undefined);

  async function handleCopy() {
    await navigator.clipboard.writeText(SNIPPET);
    setCopied(true);
    clearTimeout(timerRef.current);
    timerRef.current = window.setTimeout(() => setCopied(false), 2000);
  }

  return (
    <main className="container">
      <h1>Copy to Clipboard Button</h1>

      <div className="snippet">
        <code className="code">{SNIPPET}</code>
        <button
          type="button"
          className={copied ? 'copy copied' : 'copy'}
          onClick={handleCopy}
        >
          {copied ? 'Copied!' : 'Copy'}
        </button>
      </div>
    </main>
  );
}

copied is the single source of truth. handleCopy awaits the write, so copied only turns true after the clipboard genuinely accepted the text. The useRef holds the pending timeout across renders; clearTimeout(timerRef.current) cancels whatever was scheduled before starting a fresh 2s reset, so rapid clicks extend the window cleanly instead of fighting each other. The class and the label both read copied — nothing can drift.

Walking through one interaction

• Load: copied = false → class copy, label Copy.
• Click: await writeText(...) resolves → setCopied(true) → class copy copied (green), label Copied!; the previous timer (if any) is cleared and a new 2s timer starts.
• 2s later: the timer runs setCopied(false) → back to Copy.

Now click at t=0 and again at t=1000. The second handler clears the first timeout before it can reset the state. Its replacement fires at t=3000, so Copied! stays visible for two full seconds after the latest click.

Gotchas

• Not awaiting the write — flipping copied before the Promise resolves can show Copied! even when the copy failed. Await it (or .then), and consider a catch for the denied-permission case.
• Throwing away the timer id — storing it in useRef (not a plain variable, which resets each render) lets you clearTimeout it so overlapping clicks don't revert early.
• Duplicating state — deriving the class and label from the same copied keeps them in lock-step; tracking a separate label string invites them to disagree.

Going further

• Fallback path — older browsers or insecure origins lack navigator.clipboard; fall back to a hidden textarea plus document.execCommand('copy').
• Handle rejection — writeText rejects if permission is denied; surface a Copy failed state instead of a false Copied!.
• Extract a hook — wrap the state, timer, and handler in a useCopyToClipboard(text) hook so any button can reuse it.

Alternative solutions

import { useReducer, useRef } from 'react';
import './styles.css';

const SNIPPET = 'npm install uiready';

function reducer(_copied: boolean, action: 'copied' | 'reset'): boolean {
  return action === 'copied';
}

export default function App() {
  const [copied, dispatch] = useReducer(reducer, false);
  const timerRef = useRef<number | undefined>(undefined);

  async function handleCopy() {
    await navigator.clipboard.writeText(SNIPPET);
    dispatch('copied');
    clearTimeout(timerRef.current);
    timerRef.current = window.setTimeout(() => dispatch('reset'), 2000);
  }

  return (
    <main className="container">
      <h1>Copy to Clipboard Button</h1>
      <div className="snippet">
        <code className="code">{SNIPPET}</code>
        <button
          type="button"
          className={copied ? 'copy copied' : 'copy'}
          onClick={handleCopy}
        >
          {copied ? 'Copied!' : 'Copy'}
        </button>
      </div>
    </main>
  );
}