feat: Add useNavigation hook for managing URL parameters and navigation.

src/components/hooks/useNavigation.ts

@@ -1,5 +1,5 @@
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { buildPath } from '@/lib/url';
 
 export function useNavigation() {
@@ -10,20 +10,29 @@ export function useNavigation() {
   const [, websiteId] = pathname.match(/\/websites\/([a-f0-9-]+)/) || [];
   const [queryParams, setQueryParams] = useState(Object.fromEntries(searchParams));
 
-  const updateParams = (params?: Record<string, string | number>) => {
-    return buildPath(pathname, { ...queryParams, ...params });
-  };
+  const updateParams = useCallback(
+    (params?: Record<string, string | number>) => {
+      return buildPath(pathname, { ...queryParams, ...params });
+    },
+    [pathname, queryParams],
+  );
 
-  const replaceParams = (params?: Record<string, string | number>) => {
-    return buildPath(pathname, params);
-  };
+  const replaceParams = useCallback(
+    (params?: Record<string, string | number>) => {
+      return buildPath(pathname, params);
+    },
+    [pathname],
+  );
 
-  const renderUrl = (path: string, params?: Record<string, string | number> | false) => {
-    return buildPath(
-      teamId ? `/teams/${teamId}${path}` : path,
-      params === false ? {} : { ...queryParams, ...params },
-    );
-  };
+  const renderUrl = useCallback(
+    (path: string, params?: Record<string, string | number> | false) => {
+      return buildPath(
+        teamId ? `/teams/${teamId}${path}` : path,
+        params === false ? {} : { ...queryParams, ...params },
+      );
+    },
+    [pathname, teamId, queryParams],
+  );
 
   useEffect(() => {
     setQueryParams(Object.fromEntries(searchParams));