How do I clear url query params with a reset button?

[didemkkaslan]

I've implemented multiple query params using useQueryStates from nuqs. The problem is fox ex I select some status filters and url becomes

http://localhost:3000/meetings?statuses=ANALYSIS_READY,ANALYSIS_IN_PROGRESS,ONGOING

and when I hit the reset button (clearAllFilters function runs ) the url becomes

http://localhost:3000/meetings?statuses=&within=2025-04-06T21:00:00.000Z,2025-05-07T20:59:59.999Z

I don't want empty url params to stay in the url. I don't know why my reset function does the fix because clearOnDefault option is set to true.

import dayjs, { type Dayjs } from 'dayjs';
import utc from 'dayjs/plugin/utc';
import {
  parseAsArrayOf,
  parseAsInteger,
  parseAsIsoDateTime,
  parseAsString,
  parseAsStringEnum,
  useQueryStates,
} from 'nuqs';
import { useTransition } from 'react';
import { useDebounceCallback, useLocalStorage } from 'usehooks-ts';

dayjs.extend(utc);

export const useMeetingsTableParams = () => {
  const [isPending, startTransition] = useTransition();
  const [persistedFilters, persistFiltersToLocalStorage] = useLocalStorage<{
    page: number;
    search: string;
    searchTarget: 'meetingName' | 'meetingTranscript';
    participantsFilter: string[];
    meetingTypeFilter: string[];
    companyFilter: string[];
    dealFilter: string[];
    tagFilter: string[];
    sourceFilter: string[];
    statusFilter: string[];
    dateFilter: Date[];
    languageFilter: string[];
    sort: string;
  } | null>('meetingsTableFilters', {
    page: 1,
    search: '',
    searchTarget: 'meetingName',
    participantsFilter: [],
    meetingTypeFilter: [],
    companyFilter: [],
    dealFilter: [],
    tagFilter: [],
    sourceFilter: [],
    statusFilter: [],
    dateFilter: [
      dayjs().subtract(1, 'month').startOf('day').toDate(),
      dayjs().endOf('day').toDate(),
    ],
    languageFilter: [],
    sort: '',
  });

  const [
    {
      page,
      search,
      searchTarget,
      participantsFilter,
      meetingTypeFilter,
      companyFilter,
      dealFilter,
      tagFilter,
      sourceFilter,
      statusFilter,
      languageFilter,
      dateFilter,
      sort,
    },
    setParams,
  ] = useQueryStates(
    {
      page: parseAsInteger.withDefault(persistedFilters?.page || 1),
      search: parseAsString.withDefault(persistedFilters?.search || ''),
      searchTarget: parseAsStringEnum([
        'meetingName',
        'meetingTranscript',
      ]).withDefault(
        (persistedFilters?.searchTarget as
          | 'meetingName'
          | 'meetingTranscript') || 'meetingName',
      ),
      participantsFilter: parseAsArrayOf(parseAsString).withDefault(
        persistedFilters?.participantsFilter || [],
      ),
      meetingTypeFilter: parseAsArrayOf(parseAsString).withDefault(
        persistedFilters?.meetingTypeFilter || [],
      ),
      companyFilter: parseAsArrayOf(parseAsString).withDefault(
        persistedFilters?.companyFilter || [],
      ),
      dealFilter: parseAsArrayOf(parseAsString).withDefault(
        persistedFilters?.dealFilter || [],
      ),
      tagFilter: parseAsArrayOf(parseAsString).withDefault(
        persistedFilters?.tagFilter || [],
      ),
      sourceFilter: parseAsArrayOf(parseAsString).withDefault(
        persistedFilters?.sourceFilter || [],
      ),
      statusFilter: parseAsArrayOf(parseAsString).withDefault(
        persistedFilters?.statusFilter || [],
      ),
      dateFilter: parseAsArrayOf(parseAsIsoDateTime).withDefault(
        persistedFilters?.dateFilter || [
          dayjs().subtract(1, 'month').startOf('day').toDate(),
          dayjs().endOf('day').toDate(),
        ],
      ),
      languageFilter: parseAsArrayOf(parseAsString).withDefault(
        persistedFilters?.languageFilter || [],
      ),
      sort: parseAsString.withDefault(persistedFilters?.sort || ''),
    },
    {
      history: 'replace',
      clearOnDefault: true,
      startTransition,
      urlKeys: {
        search: 'q',
        searchTarget: 'in',
        participantsFilter: 'participants',
        meetingTypeFilter: 'templates',
        companyFilter: 'companies',
        dealFilter: 'deals',
        tagFilter: 'tags',
        sourceFilter: 'sources',
        statusFilter: 'statuses',
        languageFilter: 'languages',
        dateFilter: 'within',
        sort: 'sortBy',
      },
    },
  );

  const setParamsWithPersist = (
    newParams: Partial<typeof persistedFilters>,
  ) => {
    setParams(newParams);
    persistFiltersToLocalStorage({
      page,
      search,
      searchTarget,
      participantsFilter,
      meetingTypeFilter,
      companyFilter,
      dealFilter,
      tagFilter,
      sourceFilter,
      statusFilter,
      dateFilter,
      languageFilter,
      sort,
      ...newParams,
    });
  };

  const setPage = (newPage: number) => {
    setParamsWithPersist({ page: newPage });
  };

  const setSearch = useDebounceCallback((newSearch: string) => {
    setParamsWithPersist({ search: newSearch });
  }, 500);

  const setSearchTarget = useDebounceCallback((newSearchTarget: string) => {
    setParamsWithPersist({
      searchTarget: newSearchTarget as 'meetingName' | 'meetingTranscript',
    });
  }, 500);

  const setParticipantsFilter = (newParticipantsFilter: string[]) => {
    setParamsWithPersist({ participantsFilter: newParticipantsFilter });
  };

  const setMeetingTypeFilter = (newMeetingTypeFilter: string[]) => {
    setParamsWithPersist({ meetingTypeFilter: newMeetingTypeFilter });
  };

  const setCompanyFilter = (newCompanyFilter: string[]) => {
    setParamsWithPersist({ companyFilter: newCompanyFilter });
  };

  const setDealFilter = (newDealFilter: string[]) => {
    setParamsWithPersist({ dealFilter: newDealFilter });
  };

  const setTagFilter = (newTagFilter: string[]) => {
    setParamsWithPersist({ tagFilter: newTagFilter });
  };

  const setSourceFilter = (newSourceFilter: string[]) => {
    setParamsWithPersist({ sourceFilter: newSourceFilter });
  };

  const setStatusFilter = (newStatusFilter: string[]) => {
    setParamsWithPersist({ statusFilter: newStatusFilter });
  };

  const setLanguageFilter = (newLanguageFilter: string[]) => {
    setParamsWithPersist({ languageFilter: newLanguageFilter });
  };

  const setSorter = (newSorter: string) => {
    setParamsWithPersist({ sort: newSorter });
  };

  const setDateFilter = (newDateFilter: [Dayjs | null, Dayjs | null]) => {
    if (!newDateFilter[0] || !newDateFilter[1]) {
      setParamsWithPersist({ dateFilter: [] }); // Clear the filter if either date is null
      return;
    }

    setParamsWithPersist({
      dateFilter: [
        newDateFilter[0].startOf('day').toDate(),
        newDateFilter[1].endOf('day').toDate(),
      ],
    });
  };

  const clearAllFilters = () => {
    setParams({
      page: 1,
      search: '',
      searchTarget: 'meetingName',
      participantsFilter: [],
      meetingTypeFilter: [],
      companyFilter: [],
      dealFilter: [],
      tagFilter: [],
      sourceFilter: [],
      statusFilter: [],
      dateFilter: [
        dayjs().subtract(1, 'month').startOf('day').toDate(),
        dayjs().endOf('day').toDate(),
      ],
    });

    persistFiltersToLocalStorage({
      page: 1,
      search: '',
      searchTarget: 'meetingName',
      participantsFilter: [],
      meetingTypeFilter: [],
      companyFilter: [],
      dealFilter: [],
      tagFilter: [],
      sourceFilter: [],
      statusFilter: [],
      languageFilter: [],
      dateFilter: [
        dayjs().subtract(1, 'month').startOf('day').toDate(),
        dayjs().endOf('day').toDate(),
      ],
      sort: '',
    });
  };

  return {
    isPending,
    page,
    search,
    setPage,
    setSearch,
    searchTarget,
    setSearchTarget,
    participantsFilter,
    setParticipantsFilter,
    meetingTypeFilter,
    setMeetingTypeFilter,
    companyFilter,
    setCompanyFilter,
    dealFilter,
    setDealFilter,
    tagFilter,
    setTagFilter,
    sourceFilter,
    setSourceFilter,
    statusFilter,
    setStatusFilter,
    languageFilter,
    setLanguageFilter,
    dateFilter,
    setDateFilter,
    clearAllFilters,
    sort,
    setSorter,
  };
};

[franky47]

If you have persisted filters in localStorage, then the default value is set to that, so setting it to an empty array in the reset function is not going to match the default value, and therefore not clear it from the URL.

Instead, you should set the states you want to reset to null, which will:

1. Clear it from the URL (as you want)
2. Set the state to the default value (which may differ from an empty array if the user has persisted filters)

The issue with point n°2 is that the default value is closed over from the previous render, and so updating the local storage, even if done before updating the URL state, will still use a stale default value from the previous render. You'd have to:

1. Reset the localStorage first
2. Let React render with the updated default values
3. Send the URL state update request