fix(playground): move useState/useCallback above early returns to fix React error #310

useState(copied) and useCallback(handleCopy) were declared after the
if (loading) and if (error) early returns, violating the Rules of Hooks.

When the WASM binary was a 404, the component always hit the error branch
so both renders exited with the same hook count. After committing the WASM
binary (#423), the component now successfully transitions loading→ready,
causing React to see 11 hooks instead of 9 on the second render → #310.

Fix: move both hooks above all conditional returns.

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

Author: 2 people

website/src/components/playground/Playground.tsx

@@ -109,6 +109,15 @@ export default function Playground() {
     []
   );
 
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText('go get github.com/ajitpratap0/GoSQLX').then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }, []);
+
   if (loading) {
     return (
       <div className="flex flex-col h-full bg-[#09090b]" aria-busy="true" aria-label="Loading SQL parser">
@@ -190,16 +199,8 @@ export default function Playground() {
     );
   }
 
-  const [copied, setCopied] = useState(false);
   const hasResults = results.ast !== null;
 
-  const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText('go get github.com/ajitpratap0/GoSQLX').then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    });
-  }, []);
-
   return (
     <div className="flex flex-col h-full bg-[#09090b]">
       {/* Top toolbar */}