From a2211c7e75ea0e886b7c6e0e7a7e75b7ff68bfaa Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Sat, 27 Apr 2024 20:24:40 +0700
Subject: [PATCH] Update state handling in CaptchaProvider

Adjusted the way the 'instance' state is handled in CaptchaProvider by utilizing useRef and useCallback from React. Now, instead of managing 'instance' with useState, it is stored in a reference through useRef to prevent unnecessary re-renders. The 'setInstance' function has been updated to set this reference, ensuring the 'instance' is kept up-to-date.
---
 .../auth/src/captcha/client/captcha-provider.tsx     | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/features/auth/src/captcha/client/captcha-provider.tsx b/packages/features/auth/src/captcha/client/captcha-provider.tsx
index 8dcb769d0..cf821f3dd 100644
--- a/packages/features/auth/src/captcha/client/captcha-provider.tsx
+++ b/packages/features/auth/src/captcha/client/captcha-provider.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useState } from 'react';
+import { createContext, useCallback, useRef, useState } from 'react';
 
 import { TurnstileInstance } from '@marsidev/react-turnstile';
 
@@ -23,10 +23,16 @@ export const Captcha = createContext<{
 
 export function CaptchaProvider(props: { children: React.ReactNode }) {
   const [token, setToken] = useState<string>('');
-  const [instance, setInstance] = useState<TurnstileInstance | null>(null);
+  const instanceRef = useRef<TurnstileInstance | null>(null);
+
+  const setInstance = useCallback((ref: TurnstileInstance) => {
+    instanceRef.current = ref;
+  }, []);
 
   return (
-    <Captcha.Provider value={{ token, setToken, instance, setInstance }}>
+    <Captcha.Provider
+      value={{ token, setToken, instance: instanceRef.current, setInstance }}
+    >
       {props.children}
     </Captcha.Provider>
   );