Solution

You'll wrap the async navigator.clipboard.writeText in a stable copy function that feature-detects, awaits the write, and updates a copiedText state to true/false outcomes — never crashing on a rejection.

The problem, in plain English

The Clipboard API is deceptively simple to call and easy to get wrong. writeText is asynchronous and rejects in exactly the situations you'll hit in production: the user denied clipboard permission, the page isn't served over HTTPS, or the browser doesn't expose navigator.clipboard at all. A naive call throws an unhandled rejection and your "Copy" button silently does nothing. The hook's job is to make copying safe — always resolve to a clear boolean, and expose what was last copied so the UI can show feedback.

The mental model

Two moving parts: an action and a memory. The action is copy(text) — feature-detect, try to write, report success or failure. The memory is copiedText state — the last thing that actually landed on the clipboard, or null if the most recent attempt failed. Success writes the memory; failure erases it, so the button's "Copied!" state can never outlive a real copy.

A first attempt

The tempting version calls writeText and assumes it worked:

function useCopyToClipboardNaive() {
  const [copiedText, setCopiedText] = useState(null);
  const copy = (text) => {
    navigator.clipboard.writeText(text); // unawaited, unguarded
    setCopiedText(text);                  // claims success unconditionally
  };
  return [copiedText, copy];
}

Three failures. It never awaits, so copiedText is set before the write resolves — and set even if the write later rejects, so the UI lies. It throws a TypeError in any context where navigator.clipboard is undefined. And an unhandled promise rejection surfaces in the console when permission is denied. Copying is a fallible async operation and must be treated as one.

The working solution

const { useState, useCallback } = require('react');

function useCopyToClipboard() {
  const [copiedText, setCopiedText] = useState(null);

  const copy = useCallback(async (text) => {
    // Feature-detect: undefined in old browsers / insecure contexts.
    if (!navigator?.clipboard) {
      setCopiedText(null);
      return false;
    }
    try {
      await navigator.clipboard.writeText(text);
      setCopiedText(text); // record only what actually landed
      return true;
    } catch {
      setCopiedText(null); // a failed write must not claim success
      return false;
    }
  }, []);

  return [copiedText, copy];
}

module.exports = { useCopyToClipboard };

copy is async and wrapped in useCallback([]) for a stable identity. It first feature-detects navigator?.clipboard and bails with false when it's missing. Otherwise it awaits writeText, and only after the promise resolves does it set copiedText to the written text and return true. If the promise rejects — denied permission, insecure context — the catch sets copiedText back to null and returns false. Every path returns a boolean and updates state to match reality, so the caller can trust both the return value and copiedText.

Walking through one call

Render the hook, then click a button that calls copy('https://uiready.dev') where clipboard access is granted:

• initial — copiedText is null; the button shows "Copy".
• click — copy runs, sees navigator.clipboard exists, awaits writeText('https://uiready.dev').
• resolves — setCopiedText('https://uiready.dev'), returns true. The component re-renders; the button now shows "Copied!".
• permission later denied — a subsequent copy(secret) awaits writeText, which rejects; the catch runs setCopiedText(null), returns false. The button falls back to "Copy" and the app can show an error — the state never falsely claims the secret was copied.

Gotchas

• Not awaiting writeText — setting copiedText before the promise resolves records a success that may not happen. Await first.
• No feature detection — navigator.clipboard is undefined over HTTP or in old browsers; touching .writeText throws. Guard it.
• Swallowing failure as success — a rejected write must set copiedText = null and return false, or the button lies.
• Unstable copy — recreating it each render breaks memoized children and effect deps; wrap in useCallback.

Going further

• Auto-reset the label — pairing copiedText with a setTimeout that clears it after ~2s makes the "Copied!" state revert on its own.
• document.execCommand('copy') fallback — for very old browsers, a hidden <textarea> + execCommand is the legacy path when navigator.clipboard is absent.
• Read side — navigator.clipboard.readText() (behind a permission prompt) powers "paste" features and is the natural companion hook.