How to handle defaultValue but behaving as initialValue

[annasm07]

In my app we have certain filters that, in the first render, we automatically apply to the user. However, we want the user to clear the filter without reapplying the default value.

Context:
The user loads the page and sees a list of TASKS. This tasks are by default (for us would be on the first render) being filtered by tasks NOT DONE. However, we need the user to be able to clear this filter and see all TASKS (NOT DONE, IN PROGRESS & DONE), but in nuqs when setting to null and the state has a default value, it puts back that default.

We found two work arounds:

1. Change the functionality to make the user explicitly have to select the TASKS he wants to see as: NOT DONE, IN PROGRESS & DONE. And not have a "Clear Filter" but have a "Select All" button.

2. Something like this:

const [taskStatus, setTaskStatus] = useQueryState('taskStatus', {
  history: 'replace',
  parse: (value) => value || null,
  serialize: (value) => value || '',
});

// Use this computed value throughout your component
const effectiveTaskStatus= taskStatus ?? 'NOT DONE';

// Now you can clear it:
setTaskStatus(null); // This will actually be null, not 'NOT DONE'

---

Since we have more filters and we are handling them in useQueryStates . We have a button to "reset filters" that should handle them as bulk. Our nuqs hook that handles this currently:

import { useQueryStates, UseQueryStatesKeysMap } from 'nuqs';

export const useUrlFilterAdapter = <FilterType extends UseQueryStatesKeysMap>(filtersSchema: FilterType) => {
  const [filters, setFilters] = useQueryStates(filtersSchema);

  const addFilter = <KeyType extends keyof FilterType>(filterKey: KeyType, value: string) => {
    setFilters((prevFilters) => ({ ...prevFilters, [filterKey]: value }));
  };

  const removeFilter = (filterKey: keyof typeof filtersSchema) => {
    setFilters((prevFilters) => ({ ...prevFilters, [filterKey]: null }));
  };

  const clearAllFilters = () => {
    const cleared = Object.keys(filtersSchema).reduce((acc, key) => ({ ...acc, [key]: null }), {});

    setFilters(cleared);
  };

  return { filters, addFilter, removeFilter, clearAllFilters };
};

[tommhuth]

I have the same need, where i want to set an initial value on page load (which might be empty or not), but where the user can then empty it later which isn't possible with default value alone