DEV Community

Cover image for Simplifying React Router Query Parameter Management with Custom Hooks

Simplifying React Router Query Parameter Management with Custom Hooks

Mayank vishwakarma on April 08, 2024

Managing query parameters in a React application can be challenging, especially when you need to synchronize them with your component's state. Re...
Read full post
Collapse
 
aminnairi profile image
Amin •

What if the query parameter is mispelled or not found in the current URL? It would be great to have an optional fallback value as it may increase the size of the code to create a condition inside the useState just for this check.

Also, you could have saved some typings by using a useMemo instead of a useState + useEffect.

const [allQueryParams, setAllQueryParams] = useState(Object.fromEntries(searchParams));

  useEffect(() => {
    setAllQueryParams(Object.fromEntries(searchParams));
  }, [searchParams]);
Enter fullscreen mode Exit fullscreen mode

We could turn this code into the following.

const [allQueryParams, setAllQueryParams] = useMemo(() => {
  return Object.fromEntries(searchParams);
}, [searchParams]);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
mayankvishwakarmadev profile image
Mayank vishwakarma • • Edited

Hello @aminnairi
Yes, you can make your custom hook more readable and efficient by using useMemo instead of useState + useEffectand by adding an optional fallback value for the query parameters. Here's how to apply these recommendations:

Adding Optional Fallback Value:

By adding a second parameter to the getQueryParamByKey method, you may offer an extra fallback value for query parameters. If the query parameter is misspelled or cannot be located, the fallback value will be sent back.
Here's the updated getQueryParamByKey function:

const getQueryParamByKey = (key, fallbackValue = '') => {
  const params = new URLSearchParams(location.search);
  return params.get(key) || fallbackValue;
};
Enter fullscreen mode Exit fullscreen mode

Now, you can provide a fallback value when calling getQueryParamByKey:

const searchTerm = getQueryParamByKey('search', 'defaultSearchValue');
const currentPage = getQueryParamByKey('page', '1');
Enter fullscreen mode Exit fullscreen mode

Using useMemo for Efficiency:

To use useMemo instead of useState + useEffect for initializing allQueryParams, you can do the following:

const allQueryParams = useMemo(() => {
  return Object.fromEntries(searchParams);
}, [searchParams]);
Enter fullscreen mode Exit fullscreen mode

By incorporating these changes, your custom hook will be more efficient and flexible.

Collapse
 
skipperhoa profile image
Hòa Nguyễn Coder •

Great, but I find the code a bit long. You can try RTK Query + useMemo.

Collapse
 
mayankvishwakarmadev profile image
Mayank vishwakarma •

Hello @skipperhoa

Thank you for your suggestion!
I agree that using RTK Query and useMemo can be a great optimization, especially for larger applications.

However, for beginners, I've opted for a simpler approach using useState and useEffect to manage query parameters. This approach is more beginner-friendly and easier to understand, making it a great starting point for those new to React development.

Feel free to modify the code as needed for your own projects!