Performance issue on Version 2

[TmanTman]

I migrated a huge project that has multiple different pages with different useQueryParams, and hundreds of invocations of it across components.

I migrated the React project from version 1 to version 2.

The project became a lot slower to load on initial load.

My initial finding was that all query param properties with default values, would evaluate the params that have pass-by-reference default values (arrays, objects), to new instances on every render.

For example:

export const useTaskQuery = () => {
  const { query, setQuery } = useQueryParams({
    ...
    selectedTasks: withDefault(DelimitedArrayParam, ['all']),

The above ['all'] would cause renders to re-trigger. While on version 1, my hook rendered 500 times, and on version 2, it was 20000 times.

So I extracted the ['all'] variable into a constant, and then re-renders significantly reduced.

I still noticed significant slowness in the application.

Then I moved the query params outside of the hook. So for example

export const useTaskQuery = () => {
  const { query, setQuery } = useQueryParams({
    taskId: StringParam,
    ...
    selectedTasks: withDefault(DelimitedArrayParam, ['all']),

Became

const queryConfig = {
  taskId: StringParam,
  ...
  selectedTasks: withDefault(DelimitedArrayParam, ['all']),

export const useTaskQuery = () => {
  const { query, setQuery } = useQueryParams(queryConfig);

The performance then returned to the same level as with use-query-params version 1.

Options:

1. Improve the documentation to more explicitly document this way of defining variables
2. Update the examples to use this approach
3. Or, best case scenario, is there some equality check in the code that can be updated to handle this.