farrah/fix navbar language switcher re-render (#2488)

farrah-deriv · web-flow · commit 797fd5c386cd · 2022-03-04T11:38:52.000+08:00
* fix rendering of language switcher

* fix setting of client information

* refactor code

* added a helper function for callback reference
diff --git a/src/common/utility.js b/src/common/utility.js
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react'
 import { navigate } from 'gatsby'
 import Cookies from 'js-cookie'
 import extend from 'extend'
@@ -368,6 +369,16 @@ export const getBaseRef = (ref) => {
     return ref?.current?.base?.style ? ref?.current?.base : ref?.current
 }
 
+export const useCallbackRef = (callback) => {
+    const callback_ref = useRef()
+
+    useEffect(() => {
+        callback_ref.current = callback
+    }, [callback])
+
+    return callback_ref
+}
+
 const uk_subdomain_countries = ['gb']
 const eu_subdomain_countries = ['nl']
 
diff --git a/src/components/hooks/use-client-information.js b/src/components/hooks/use-client-information.js
@@ -1,26 +1,27 @@
 import { useState, useEffect } from 'react'
-import { getClientInformation, getDomain } from 'common/utility'
+import { getClientInformation, getDomain, useCallbackRef } from 'common/utility'
 
 export const useClientInformation = () => {
     const [client_information, setClientInformation] = useState(false)
-    const [current_client_information, setCurrentClientInformation] = useState(false)
+
+    const setCurrentClientInformation = () => {
+        const current_client_information = getClientInformation(getDomain())
+        const is_client_information_updated =
+            current_client_information &&
+            JSON.stringify(current_client_information) != JSON.stringify(client_information)
+
+        if (is_client_information_updated) setClientInformation(current_client_information)
+    }
+
+    const callback_ref = useCallbackRef(setCurrentClientInformation)
 
     useEffect(() => {
         const cookie_interval = setInterval(() => {
-            setCurrentClientInformation(getClientInformation(getDomain()))
+            callback_ref.current()
         }, 1000)
+
         return () => clearInterval(cookie_interval)
     }, [])
 
-    useEffect(() => {
-        if (current_client_information) {
-            if (JSON.stringify(current_client_information) != JSON.stringify(client_information)) {
-                setClientInformation(current_client_information)
-            }
-        } else {
-            setClientInformation(false)
-        }
-    }, [current_client_information])
-
     return client_information
 }
