Skip to content

perf: optimize Turnstile callbacks to prevent re-renders #145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jun 8, 2025
Merged

perf: optimize Turnstile callbacks to prevent re-renders #145

merged 1 commit into from
Jun 8, 2025

Conversation

nullcoder
Copy link
Owner

Summary

  • Optimize Turnstile component to prevent unnecessary re-renders
  • Add stable callback references using React's useCallback hook
  • Move Turnstile component outside the main form content area

Changes

  • Added useCallback hooks: Created handleTurnstileSuccess, handleTurnstileError, and handleTurnstileExpire with empty dependency arrays to ensure stable references
  • Moved component placement: Turnstile is now rendered outside the main form div to prevent form re-renders from affecting it
  • Fixed TypeScript error: Added missing mockExecute function to test mocks
  • Code formatting: Ran prettier to ensure consistent formatting

Performance Benefits

  • Turnstile widget now only renders once on mount
  • Parent component re-renders no longer trigger Turnstile re-initialization
  • Reduces unnecessary API calls and improves user experience

Test plan

  • All existing tests pass
  • TypeScript compilation succeeds
  • Linting passes
  • Turnstile widget loads correctly in browser
  • Callbacks fire properly (success, error, expire)
  • No re-renders when parent component updates

🤖 Generated with Claude Code

@nullcoder @claude
perf: optimize Turnstile callbacks to prevent re-renders
056c442 
- 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>
@cloudflare-workers-and-pages Cloudflare Workers and Pages
Copy link

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs		 ghostpaste 056c442 Visit preview Jun 08 2025, 06:23 PM

@nullcoder nullcoder merged commit b34225e into main Jun 8, 2025
1 check passed
@nullcoder nullcoder deleted the perf/optimize-turnstile-callbacks branch June 8, 2025 18:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@nullcoder