How to Manage Complex States with React Router Search Params and Custom Serializers?

React Router's useSearchParams hook gives you powerful control over the query string portion of your URL, also known as search params. It lets you read, set, and update parameters directly within your React components, making URL-based state management a breeze.

While React Router's useSearchParams hook excels at handling basic key-value pairs, managing complex state objects can get tricky. This is where custom serializers come in, allowing you to tailor how your state data is encoded and decoded in the URL.

This blog covers everything about React Router Search Params and Custom Serializers, so let’s get started.

React Router Search Params: The Basics

A React Router search param, also known as a URL query parameter, is a key-value pair appended to the URL after a question mark (?). It allows you to store and access additional information within the URL itself.

Here's an example:

https://example.com/products?category=electronics&price=100-200

In this example, we have two search params:

• category=electronics: This specifies the product category as electronics.

• price=100-200: This indicates the price range between 100 and 200.

React Router provides the useSearchParams hook to interact with these search params within your React components. You can use it to:

• Read the current search params: Access their values and use them to update your component's state or behavior.

• Set new or update existing search params: Modify the URL and potentially trigger component re-renders based on the changes.

• Navigate based on search params: Use them to control the navigation flow within your application.

Using search params effectively can offer several benefits, including:

• URL-based state management: Store and access application state directly in the URL, making it shareable, bookmarkable, and easily accessible.

• Clean component logic: Separate state management from UI code, leading to more maintainable and organized components.

• Dynamic navigation: Update the UI and application behavior based on changes in the search params, providing a more responsive and user-friendly experience.

How to Set Search Params in React?

1. Getting Search Params:

Use useSearchParams hook to access the current search params as an array: const [searchParams, setSearchParams] = useSearchParams(); searchParams is a URLSearchParams object with methods like get(key), getAll(key), and entries().

Example: const category = searchParams.get('category');

2. Setting Search Params:

Use the setSearchParams function to update the URL with new or modified params: Pass an object with new key-value pairs: setSearchParams({ category: 'electronics' });

Use a function to update based on existing params: setSearchParams(params => ({ ...params, priceRange: [100, 500] }));

This triggers a navigation update automatically, reflecting the changes in the URL and potentially re-rendering components based on the new state.

The Challenge of Complex URL State:

Imagine your React app boasts a powerful search filter with options galore: categories, price ranges, sorting preferences, and even custom filters. Representing this intricate state as a single URL parameter is like trying to fit a majestic elephant into a teacup – it's simply not gonna work.

This is where the challenges of handling complex URL states arise:

1. Unreadable URLs:

Encoding a complex state object directly into a URL results in an unreadable monstrosity like this:

/products?categories=electronics,apparel&priceRange=%7B"min":100,"max":500%7D&sortBy=price-asc&customFilters=%5B%22brand:apple"%2C%22color:blue"%5D

Not only is it unfriendly to users and developers alike, but debugging becomes a near-impossible feat.

2. Data Type Loss:

Simply stringifying your state object leads to loss of data types. Numbers turn into strings, and nested structures become flattened, making it cumbersome to reconstruct the original state accurately.

3. Limited Functionality:

React Router built-in useSearchParams hook handles basic key-value pairs well, but struggles with complex objects. You're left juggling manual parsing and string manipulation, adding complexity and potential for errors.

Enter the Hero: Custom Serializers!

React Router empowers you to create custom serialization and parsing functions for useSearchParams. These functions act as translators, transforming your state object into a URL-friendly format and vice versa.

Here's how they work their magic:

• Serialization: Break down your state object into individual key-value pairs, applying custom logic for encoding specific values. Imagine splitting categories into a comma-separated list or encoding nested objects using a specific format.
• Parsing: Decode the encoded values based on your custom logic, reassemble the object, and ensure proper data types are restored. Think of it as piecing together the puzzle pieces back into your majestic state elephant. Building a Custom Serializer: Let's explore an example of a search filter state object:

Copy
1
2
3
4
5
6
7
8
const state = {
  categories: ['electronics', 'apparel'],
  priceRange: {
    min: 100,
    max: 500,
  },
  sortBy: 'price-asc',
};

Here's how we can build a custom serializer:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const serialize = (state) => {
  const params = new URLSearchParams();
  params.set('categories', state.categories.join(',')); // Comma-separated list
  params.set('minPrice', state.priceRange.min); // Individual values
  params.set('maxPrice', state.priceRange.max);
  params.set('sortBy', state.sortBy);
  return params;
};

const parse = (params) => {
  return {
    categories: params.getAll('categories').split(','), // Parse list
    priceRange: {
      min: Number(params.get('minPrice')), // Convert to numbers
      max: Number(params.get('maxPrice')),
    },
    sortBy: params.get('sortBy'),
  };
};

const MyComponent = () => {
  const [searchParams, setSearchParams] = useSearchParams({ ... }, { serialize, parse });
  // ... Use searchParams and update state ...
};

Benefits of Custom Serializers:

• Improved URL readability: Encoded parameters are clear and understandable, making debugging and sharing easier.
• Type safety: You can ensure proper data types for your state values during parsing.
• Flexibility: Adapt the logic to handle different types of state data and specific requirements.
• Maintainability: Separate state logic from URL handling, making your code cleaner and more organized.

Moreover, custom serializers open up a world of possibilities for managing complex state in React Router. You can:

• Handle nested objects by recursively applying serialization and parsing logic.
• Encode and decode arrays with custom delimiters or transformations.
• Integrate with external libraries for advanced data handling.

Remember:

Design your serializers with user experience in mind. Keep URLs understandable and avoid overly complex logic. Test your serializers thoroughly to ensure data integrity and proper state reconstruction.

Taming complex states in React apps is no longer a mythical feat!

By leveraging custom serializers, you can unlock the full potential of React Router's useSearchParams and manage complex states in your React applications with ease and flexibility.

Custom serializers empower you to bend React Router's useSearchParams to your will, crafting elegant and efficient solutions for managing any state beast, no matter how intricate. Embrace the power of custom serialization, conquer URL complexity, and watch your React apps soar to new heights of maintainability and flexibility.

I hope this blog post provides a comprehensive overview of using custom serializers with React Router Search Params.