Fix useEffect dependency and cleanup issues in onboarding steps

docs/frontend/state-management.md

@@ -235,3 +235,12 @@ const folder = useSelector((state: RootState) =>
 ```
 
 This Redux-based architecture provides a scalable and maintainable state management solution that grows with our application's complexity.
+
+## React Hooks Guidelines
+
+When working on frontend components, especially in onboarding flows:
+
+- Always include all external variables, props, and functions used inside a `useEffect` hook in its dependency array.
+- Avoid using empty dependency arrays (`[]`) when the effect relies on props, Redux dispatch, context values, or functions returned from custom hooks.
+- This helps prevent stale closures, unexpected behavior, and navigation issues during multi-step flows.
+- Follow the React Rules of Hooks and ensure ESLint hook rules pass before submitting a PR.

frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx

@@ -34,10 +34,12 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
   const [selectedAvatar, setLocalAvatar] = useState('');
 
   useEffect(() => {
-    if (localStorage.getItem('name') && localStorage.getItem('avatar')) {
+    const hasName = localStorage.getItem('name');
+    const hasAvatar = localStorage.getItem('avatar');
+    if ( hasName && hasAvatar) {
       dispatch(markCompleted(stepIndex));
     }
-  }, []);
+  }, [dispatch,stepIndex]);
 
   const handleAvatarSelect = (avatar: string) => {
     setLocalAvatar(avatar);

frontend/src/components/OnboardingSteps/FolderSetupStep.tsx

@@ -34,7 +34,7 @@ export function FolderSetupStep({
     if (localStorage.getItem('folderChosen') === 'true') {
       dispatch(markCompleted(stepIndex));
     }
-  }, []);
+  }, [dispatch,stepIndex]);
 
   const { pickSingleFolder, addFolderMutate } = useFolder({
     title: 'Select folder to import photos from',

frontend/src/components/OnboardingSteps/ServerCheck.tsx

@@ -38,6 +38,7 @@ export const ServerCheck: React.FC<ServerCheckProps> = ({ stepIndex }) => {
   useEffect(() => {
     if (mainBackendLoading || syncMicroserviceLoading) {
       dispatch(showLoader('Waiting for servers to start'));
+      return;
     }
     if (mainBackendError || syncMicroserviceError) {
       dispatch(hideLoader());
@@ -53,12 +54,15 @@ export const ServerCheck: React.FC<ServerCheckProps> = ({ stepIndex }) => {
       setTimeout(() => {
         exit(1);
       }, 2000);
+      return;
     }
     if (mainBackendSuccess && syncMicroserviceSuccess) {
       dispatch(hideLoader());
       dispatch(markCompleted(stepIndex));
     }
   }, [
+    dispatch,
+    stepIndex,
     mainBackendSuccess,
     mainBackendLoading,
     mainBackendError,

frontend/src/components/OnboardingSteps/ThemeSelectionStep.tsx

@@ -34,7 +34,7 @@ export const ThemeSelectionStep: React.FC<ThemeSelectionStepProps> = ({
     if (localStorage.getItem('themeChosen')) {
       dispatch(markCompleted(stepIndex));
     }
-  }, []);
+  }, [dispatch,stepIndex]);
   const handleThemeChange = (value: 'light' | 'dark' | 'system') => {
     setTheme(value);
   };

frontend/src/components/OnboardingSteps/UpdateStep.tsx

@@ -23,19 +23,26 @@ export const UpdateStep: React.FC<UpdateStepProps> = ({ stepIndex }) => {
   const dispatch = useDispatch();
 
   useEffect(() => {
+    let isMount = true;
     // Check for updates on mount
     const check = async () => {
+      if (!isMount) {
+        return;
+      }
       dispatch(showLoader('Checking for updates...'));
       const hasUpdate = await checkForUpdates();
       dispatch(hideLoader());
 
       // If no update, mark onboarding step complete
-      if (!hasUpdate) {
+      if (isMount && !hasUpdate) {
         dispatch(markCompleted(stepIndex));
       }
     };
     check();
-  }, []);
+    return () => {
+      isMount = false;
+    }
+  }, [dispatch,stepIndex, checkForUpdates]);
 
   // Show update dialog only if update is available
   if (updateAvailable) {