What is the proper way to wrap SetParams into useCallback ?

[Kavan72]

This is my custom hook

import { useCallback, useMemo } from 'react';
import { parseAsString, parseAsInteger, useQueryStates, parseAsStringLiteral } from 'nuqs';

export const Organization_SORT_OPTIONS = [
  { label: 'Latest', value: 'latest' },
  { label: 'Oldest', value: 'oldest' },
];

export const OrganizationDefaultPage = 1;
export const OrganizationDefaultPageSize = 9;

const createParsers = (query: string, page: number, pageSize: number, sortBy: string) => ({
  query: parseAsString.withDefault(query).withOptions({ history: 'push' }),
  page: parseAsInteger.withDefault(page).withOptions({ history: 'push' }),
  pageSize: parseAsInteger.withDefault(pageSize).withOptions({ history: 'push' }),
  sortBy: parseAsStringLiteral(Organization_SORT_OPTIONS.map((option) => option.value))
    .withDefault(sortBy)
    .withOptions({ history: 'push' }),
});

const urlKeys = {
  page: 'page',
  pageSize: 'pageSize',
  sortBy: 'sortBy',
};

export type ParsersType = ReturnType<typeof createParsers>;
export type OrganizationListSearchParams = ReturnType<typeof useQueryStates<ParsersType>>[0];
export type SetOrganizationListSearchParams = ReturnType<typeof useQueryStates<ParsersType>>[1];

export function useOrganizationListSearchParams(
  defaultQuery: string = '',
  defaultPage: number = OrganizationDefaultPage,
  defaultPageSize: number = OrganizationDefaultPageSize,
  defaultSortBy: string = 'latest'
) {
  const parsers = useMemo(
    () => createParsers(defaultQuery, defaultPage, defaultPageSize, defaultSortBy),
    [defaultQuery, defaultPage, defaultPageSize, defaultSortBy]
  );
  const [{ query, page, pageSize, sortBy }, updateOrganizationSearchParams] = useQueryStates(
    parsers,
    { urlKeys }
  );

  const updateOrganizationSearchFn = useCallback(
    async (props: OrganizationListSearchParams) =>
      updateOrganizationSearchParams((previousState) => ({ ...props })),
    []
  );

  return useMemo(
    () => ({
      query,
      page,
      pageSize,
      sortBy,
      updateOrganizationSearchFn,
    }),
    [query, page, pageSize, sortBy, updateOrganizationSearchFn]
  );
}

I'm trying to create updateOrganizationSearchFn which do same as updateOrganizationSearchParams.

[franky47]

You could use the following type:

import { type SetValues } from 'nuqs'

const updateOrganizationSearchFn = useCallback<SetValues<ParsersType>>(
  (args =>
    updateOrganizationSearchParams(args),
  [updateOrganizationSearchParams]
);

Note that:

• Unless you plan to await things, there is no need to add async to the callback definition (the state updater function already returns a Promise)
• Forwarding the args as-is allows using the whole API of the state updater function (passing a partial object of values, or a function to access the previous values)
• You'll want to add the state updater function to the dependency array to recreate your custom callback when it changes (that would be when the default values change and createParsers is called again).

[Kavan72]

Thank a lot ❤️