fix: re-render causing by supabase

onAuthStateChange, with focus change (during switch tabs) make a setSession causing re-render

Author: lxup

src/context/auth-context.tsx

@@ -139,7 +139,15 @@ export const AuthProvider = ({ session: initialSession, children }: AuthProvider
 
   useEffect(() => {
     const { data: listener } = supabase.auth.onAuthStateChange((_event, updatedSession) => {
-      setSession(updatedSession);
+      setSession(prev => {
+        if (
+          prev?.access_token === updatedSession?.access_token &&
+          prev?.expires_at === updatedSession?.expires_at
+        ) {
+          return prev;
+        }
+        return updatedSession;
+      });
     });
 
     return () => {

src/context/react-query-context.tsx

@@ -1,35 +1,20 @@
 'use client';
 
-import { QueryClientProvider } from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { QueryNormalizerProvider } from '@normy/react-query';
-import { getType } from '@/lib/react-query/getType';
 import { getQueryClient } from '@/lib/react-query/queryClient';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { useMemo } from 'react';
 
 export const ReactQueryProvider = ({
   children,
 }: {
   children: React.ReactNode;
 }) => {
-  const queryClient = getQueryClient();
+  const queryClient = useMemo(() => getQueryClient(), []);
   return (
-    // <QueryNormalizerProvider
-    //   queryClient={queryClient}
-    //   normalizerConfig={{
-    //     getNormalizationObjectKey: obj => {
-    //       if (obj.id && getType(obj)) {
-    //         return `${getType(obj)}:${obj.id}`
-    //       } else if (obj.id) {
-    //         return `${obj.id}`
-    //       }
-    //     },
-    //     devLogging: true,
-    //   }}
-    // >
-      <QueryClientProvider client={queryClient}>
-        {children}
-        <ReactQueryDevtools initialIsOpen={false} />
-      </QueryClientProvider>
-    // </QueryNormalizerProvider>
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
   );
 };