Summary

Fixed the issue where the invisible Turnstile widget was constantly reloading due to React re-renders.

Problem

The Turnstile component was re-rendering and recreating the widget whenever the parent component re-rendered. This happened because:

• Callback functions were recreated on every render
• The useEffect dependency array included these callbacks
• Each re-render would destroy and recreate the widget

Solution

Implemented an optimal solution using:

1. Ref for callbacks - Store callbacks in a ref that's updated without triggering re-renders
2. isRenderedRef flag - Ensure the widget is only rendered once after script loads
3. Proper cleanup - Only remove widget on unmount, not on every re-render

This approach:

• Prevents unnecessary widget reloads
• Keeps callbacks fresh without stale closures
• Only re-renders when sitekey, theme, or size changes (expected behavior)

Test Plan

• Updated tests to verify callbacks are properly forwarded
• All tests passing
• Manual testing with real Turnstile widget
• Verify widget only loads once
• Confirm callbacks work correctly after parent re-renders

🤖 Generated with Claude Code