change provider name and add usememo

apps/web/src/contexts/AppProvider.tsx

@@ -20,7 +20,7 @@ import GlobalLayoutContextProvider from './globalLayout/GlobalLayoutContext';
 import SidebarDrawerProvider from './globalLayout/GlobalSidebar/SidebarDrawerContext';
 import ModalProvider from './modal/ModalContext';
 import NftPreviewFallbackProvider from './nftPreviewFallback/NftPreviewFallbackContext';
-import { ProgressProvider } from './onboardingProgress';
+import { OnboardingProgressProvider } from './onboardingProgress';
 import PostComposerProvider from './postComposer/PostComposerContext';
 import SnowProvider from './snow/SnowContext';
 import { SwrProvider } from './swr/SwrContext';
@@ -54,7 +54,7 @@ export default function AppProvider({
   globalLayoutContextPreloadedQuery,
 }: Props) {
   return (
-    <ProgressProvider>
+    <OnboardingProgressProvider>
       <Boundary>
         <ToastProvider>
           <MaintenanceStatusProvider
@@ -106,6 +106,6 @@ export default function AppProvider({
           </MaintenanceStatusProvider>
         </ToastProvider>
       </Boundary>
-    </ProgressProvider>
+    </OnboardingProgressProvider>
   );
 }

apps/web/src/contexts/onboardingProgress/index.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useContext, useState } from 'react';
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
 
 import { ONBOARDING_PROGRESS_BAR_STEPS, StepName } from '~/components/Onboarding/constants';
 
@@ -10,7 +10,9 @@ type ProgressContextType = {
 
 const ProgressContext = createContext<ProgressContextType | undefined>(undefined);
 
-export const ProgressProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const OnboardingProgressProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
   const [progress, setProgressState] = useState({ from: 0, to: 0 });
 
   const setProgress = useCallback((stepName: StepName) => {
@@ -20,17 +22,15 @@ export const ProgressProvider: React.FC<{ children: React.ReactNode }> = ({ chil
     }
   }, []);
 
-  return (
-    <ProgressContext.Provider value={{ ...progress, setProgress }}>
-      {children}
-    </ProgressContext.Provider>
-  );
+  const contextValue = useMemo(() => ({ ...progress, setProgress }), [progress, setProgress]);
+
+  return <ProgressContext.Provider value={contextValue}>{children}</ProgressContext.Provider>;
 };
 
 export const useProgress = () => {
   const context = useContext(ProgressContext);
   if (!context) {
-    throw new Error('useProgress must be used within a ProgressProvider');
+    throw new Error('useProgress must be used within a OnboardingProgressProvider');
   }
   return context;
 };