src/pages/sign/Forget.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import Icon from '@ant-design/icons'
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
 import {
@@ -18,7 +18,27 @@ const Forget: React.FC = () => {
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
     const turnstileRef = useRef<TurnstileInstance>()
+    const turnstileRefCallback = useCallback(
+        (node: TurnstileInstance) => {
+            turnstileRef.current = node
+
+            if (location.pathname === '/forget' && !searchParams.get('code')) {
+                turnstileRef.current?.execute()
+            }
+        },
+        [location.pathname, searchParams]
+    )
     const retrieveTurnstileRef = useRef<TurnstileInstance>()
+    const retrieveTurnstileRefCallback = useCallback(
+        (node: TurnstileInstance) => {
+            retrieveTurnstileRef.current = node
+
+            if (location.pathname === '/forget' && searchParams.get('code')) {
+                retrieveTurnstileRef.current?.execute()
+            }
+        },
+        [location.pathname, searchParams]
+    )
     const [isSending, setIsSending] = useState(false)
     const [isSent, setIsSent] = useState(false)
     const [isChanging, setIsChanging] = useState(false)
@@ -42,20 +62,6 @@ const Forget: React.FC = () => {
         }
     }, [isChanging])
 
-    useUpdatedEffect(() => {
-        if (location.pathname !== '/forget') {
-            return
-        }
-
-        setTimeout(() => {
-            if (!searchParams.get('code')) {
-                turnstileRef.current?.execute()
-            } else {
-                retrieveTurnstileRef.current?.execute()
-            }
-        }, 500)
-    }, [location.pathname])
-
     const handleOnSend = (forgetParam: ForgetParam) => {
         if (isSending) {
             return
@@ -93,10 +99,6 @@ const Forget: React.FC = () => {
 
     const handleOnRetry = () => {
         setIsSent(false)
-
-        setTimeout(() => {
-            turnstileRef.current?.execute()
-        }, 500)
     }
 
     const handleOnChange = (retrieveParam: RetrieveParam) => {
@@ -162,7 +164,7 @@ const Forget: React.FC = () => {
                                         <AntdForm.Item>
                                             <Turnstile
                                                 id={'forget-turnstile'}
-                                                ref={turnstileRef}
+                                                ref={turnstileRefCallback}
                                                 siteKey={H_CAPTCHA_SITE_KEY}
                                                 options={{ theme: 'light', execution: 'execute' }}
                                                 onSuccess={setCaptchaCode}
@@ -234,7 +236,7 @@ const Forget: React.FC = () => {
                                     <AntdForm.Item>
                                         <Turnstile
                                             id={'retrieve-turnstile'}
-                                            ref={retrieveTurnstileRef}
+                                            ref={retrieveTurnstileRefCallback}
                                             siteKey={H_CAPTCHA_SITE_KEY}
                                             options={{ theme: 'light', execution: 'execute' }}
                                             onSuccess={setRetrieveCaptchaCode}

src/pages/sign/SignIn.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import Icon from '@ant-design/icons'
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
 import {
@@ -22,6 +22,15 @@ const SignIn: React.FC = () => {
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
     const turnstileRef = useRef<TurnstileInstance>()
+    const turnstileRefCallback = useCallback(
+        (node: TurnstileInstance) => {
+            turnstileRef.current = node
+            if (location.pathname === '/login') {
+                turnstileRef.current?.execute()
+            }
+        },
+        [location.pathname]
+    )
     const [isSigningIn, setIsSigningIn] = useState(false)
     const [captchaCode, setCaptchaCode] = useState('')
 
@@ -33,15 +42,6 @@ const SignIn: React.FC = () => {
         }
     }, [isSigningIn])
 
-    useUpdatedEffect(() => {
-        if (location.pathname !== '/login') {
-            return
-        }
-        setTimeout(() => {
-            turnstileRef.current?.execute()
-        }, 500)
-    }, [turnstileRef])
-
     const handleOnFinish = (loginParam: LoginParam) => {
         if (isSigningIn) {
             return
@@ -165,7 +165,7 @@ const SignIn: React.FC = () => {
                         <AntdForm.Item>
                             <Turnstile
                                 id={'sign-in-turnstile'}
-                                ref={turnstileRef}
+                                ref={turnstileRefCallback}
                                 siteKey={H_CAPTCHA_SITE_KEY}
                                 options={{ theme: 'light', execution: 'execute' }}
                                 onSuccess={setCaptchaCode}

src/pages/sign/SignUp.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import Icon from '@ant-design/icons'
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
 import {
@@ -17,6 +17,16 @@ const SignUp: React.FC = () => {
     const location = useLocation()
     const navigate = useNavigate()
     const turnstileRef = useRef<TurnstileInstance>()
+    const turnstileRefCallback = useCallback(
+        (node: TurnstileInstance) => {
+            turnstileRef.current = node
+
+            if (location.pathname === '/register') {
+                turnstileRef.current?.execute()
+            }
+        },
+        [location.pathname]
+    )
     const [isSigningUp, setIsSigningUp] = useState(false)
     const [isFinish, setIsFinish] = useState(false)
     const [isSending, setIsSending] = useState(false)
@@ -39,9 +49,6 @@ const SignUp: React.FC = () => {
                 replace: true
             })
         }
-        setTimeout(() => {
-            turnstileRef.current?.execute()
-        }, 500)
     }, [location.pathname])
 
     const handleOnFinish = (registerParam: RegisterParam) => {
@@ -192,7 +199,7 @@ const SignUp: React.FC = () => {
                                 <AntdForm.Item>
                                     <Turnstile
                                         id={'sign-up-turnstile'}
-                                        ref={turnstileRef}
+                                        ref={turnstileRefCallback}
                                         siteKey={H_CAPTCHA_SITE_KEY}
                                         options={{ theme: 'light', execution: 'execute' }}
                                         onSuccess={setCaptchaCode}