useEffect + useCallback

Author: MattIPv4

apps/site/components/Downloads/Release/VersionDropdown.tsx

@@ -2,7 +2,7 @@
 
 import WithNoScriptSelect from '@node-core/ui-components/Common/Select/NoScriptSelect';
 import { useLocale, useTranslations } from 'next-intl';
-import { use } from 'react';
+import { use, useCallback, useEffect } from 'react';
 
 import { redirect, usePathname } from '#site/navigation.mjs';
 import { STATUS_KIND_MAP } from '#site/next.constants.mjs';
@@ -23,43 +23,51 @@ const VersionDropdown: FC = () => {
 
   // Allows us to keep the route semantically correct to what the user should expect
   // from the /current and non /current routes.
-  const getRedirectPath = (status?: NodeReleaseStatus) => {
-    if (
-      (status === 'LTS' || status === 'EOL') &&
-      (pathname.includes('current') || pathname.includes('alpha'))
-    ) {
-      return '/download';
-    }
+  const getRedirectPath = useCallback(
+    (status?: NodeReleaseStatus) => {
+      if (
+        (status === 'LTS' || status === 'EOL') &&
+        (pathname.includes('current') || pathname.includes('alpha'))
+      ) {
+        return '/download';
+      }
 
-    if (status === 'Current' && !pathname.includes('current')) {
-      return '/download/current';
-    }
+      if (status === 'Current' && !pathname.includes('current')) {
+        return '/download/current';
+      }
 
-    if (status === 'Alpha' && !pathname.includes('alpha')) {
-      return '/download/alpha';
-    }
-  };
+      if (status === 'Alpha' && !pathname.includes('alpha')) {
+        return '/download/alpha';
+      }
+    },
+    [pathname]
+  );
 
   // Ensure the initial route is correct based on the release status.
-  const redirectPath = getRedirectPath(release.status);
-  if (redirectPath) {
-    redirect({ href: redirectPath, locale });
-  }
+  useEffect(() => {
+    const redirectPath = getRedirectPath(release.status);
+    if (redirectPath) {
+      redirect({ href: redirectPath, locale });
+    }
+  }, [getRedirectPath, release.status, locale]);
 
   // Handle setting the new version or navigating to the correct route based on status.
-  const setVersionOrNavigate = (version: string) => {
-    const selectedRelease = releases.find(
-      ({ versionWithPrefix }) => versionWithPrefix === version
-    );
+  const setVersionOrNavigate = useCallback(
+    (version: string) => {
+      const selectedRelease = releases.find(
+        ({ versionWithPrefix }) => versionWithPrefix === version
+      );
 
-    const href = getRedirectPath(selectedRelease?.status);
-    if (href) {
-      redirect({ href, locale });
-      return;
-    }
+      const href = getRedirectPath(selectedRelease?.status);
+      if (href) {
+        redirect({ href, locale });
+        return;
+      }
 
-    setVersion(version);
-  };
+      setVersion(version);
+    },
+    [getRedirectPath, releases, setVersion, locale]
+  );
 
   return (
     <WithNoScriptSelect