perf: optimize Turnstile callbacks to prevent re-renders

nullcoder · claude · nullcoder · commit 056c44298730 · 2025-06-08T11:20:13.000-07:00
- Add useCallback hooks for all Turnstile event handlers in create page - Create stable callback references with empty dependency arrays - Move Turnstile component outside main form content - Fix TypeScript error by adding mockExecute to test suite - Run prettier formatting on all files - Ensures Turnstile widget only renders once, improving performance 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/app/create/page.tsx b/app/create/page.tsx
@@ -59,6 +59,27 @@ export default function CreateGistPage() {
   const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
   const [isTurnstileReady, setIsTurnstileReady] = useState(false);
 
+  // Stable callback references to prevent Turnstile re-renders
+  const handleTurnstileSuccess = useCallback((token: string) => {
+    setTurnstileToken(token);
+    setIsTurnstileReady(true);
+  }, []);
+
+  const handleTurnstileError = useCallback(() => {
+    setError(
+      "🛡️ Security check failed. Please refresh the page and try again."
+    );
+    setIsTurnstileReady(false);
+  }, []);
+
+  const handleTurnstileExpire = useCallback(() => {
+    setTurnstileToken(null);
+    setIsTurnstileReady(false);
+    setError(
+      "⏰ Security verification expired. Please refresh the page to continue."
+    );
+  }, []);
+
   const handleFilesChange = useCallback((newFiles: FileData[]) => {
     setFiles(newFiles);
     // Don't clear errors on file change - let them persist
@@ -321,35 +342,6 @@ export default function CreateGistPage() {
           </CardContent>
         </Card>
 
-        {/* Invisible Turnstile Verification */}
-        {turnstileSiteKey && (
-          <div className="hidden">
-            <Turnstile
-              sitekey={turnstileSiteKey}
-              action="create_gist"
-              onSuccess={(token) => {
-                setTurnstileToken(token);
-                setIsTurnstileReady(true);
-              }}
-              onError={() => {
-                setError(
-                  "🛡️ Security check failed. Please refresh the page and try again."
-                );
-                setIsTurnstileReady(false);
-              }}
-              onExpire={() => {
-                setTurnstileToken(null);
-                setIsTurnstileReady(false);
-                setError(
-                  "⏰ Security verification expired. Please refresh the page to continue."
-                );
-              }}
-              theme="auto"
-              appearance="interaction-only"
-            />
-          </div>
-        )}
-
         {/* Error Display */}
         {(error || validationMessage) && (
           <Alert variant="destructive">
@@ -394,6 +386,18 @@ export default function CreateGistPage() {
         )}
       </div>
 
+      {/* Invisible Turnstile Verification */}
+      {turnstileSiteKey && (
+        <Turnstile
+          sitekey={turnstileSiteKey}
+          action="create_gist"
+          onSuccess={handleTurnstileSuccess}
+          onError={handleTurnstileError}
+          onExpire={handleTurnstileExpire}
+          appearance="interaction-only"
+        />
+      )}
+
       {/* Share Dialog */}
       {shareUrl && (
         <ShareDialog
diff --git a/components/ui/turnstile.test.tsx b/components/ui/turnstile.test.tsx
@@ -6,6 +6,7 @@ describe("Turnstile", () => {
   const mockRender = vi.fn().mockReturnValue("widget-123");
   const mockReset = vi.fn();
   const mockRemove = vi.fn();
+  const mockExecute = vi.fn();
   const mockOnSuccess = vi.fn();
   const mockOnError = vi.fn();
   const mockOnExpire = vi.fn();
@@ -16,6 +17,7 @@ describe("Turnstile", () => {
       render: mockRender,
       reset: mockReset,
       remove: mockRemove,
+      execute: mockExecute,
     };
 
     vi.clearAllMocks();
