Is there way to use like useReducer ?

[Kavan72]

At some points, we have many states, so there we are using the useReducer approach. Check this:

interface State {
  productData: Array<Product>;
  isLoading?: boolean;
}

const [state, setState] = useReducer(
  (prev: State, next: Partial<State>): State => {
    return { ...prev, ...next };
  },
  {
    productData: [],
    isLoading: false,
  }
);

If you want to update the state, you can do it like this:

setState({ isLoading: true });

And to get a particular state:

state.isLoading;

is it possible with useQueryState ?

[franky47]

You may do this with useQueryStates (plural), which supports multiple related search params.

It does not behave exactly like useReducer, in the sense that it doesn't support a reducer function nor provides a dispatch method, but it allows obtaining the previous state and return partial updates:

const [{ productData, isLoading }, setState] = useQueryStates({
  productData: parseAsJson<Product[]>().withDefault([]),
  isLoading: parseAsBoolean.withDefault(false)
})

setState((previousState) => {
  // Return a partial update of the state type to update the relevant values
  // Example:
  return {
    isLoading: !previousState.isLoading
    // This won't touch the productData
  }
})

[Kavan72]

Ohh, that's nice. i'll check that and let you know @franky47.

[Kavan72]

Btw @franky47 how can i type the full obj, like i'm using this way

const [state, setState] = useQueryStates({
  productData: parseAsJson<Product[]>().withDefault([]),
  isLoading: parseAsBoolean.withDefault(false)
})

and i want to type state and setState so i can pass to another component.

[franky47]

What are you trying to obtain as an output type? The type of state here should be { productData: Product[], isLoading: boolean }.

[Kavan72]

yes, for state is fine like

export interface Props {
  state: { productData: Product[], isLoading: boolean }
  setState: ?
}

but what about setState ?

[franky47]

Ah I see, the best way would be to infer those types directly from the useQueryStates type:

const searchParamsParsers = {
  productData: parseAsJson<Product[]>().withDefault([]),
  isLoading: parseAsBoolean.withDefault(false)
}
type SearchParamsState = ReturnType<typeof useQueryStates<typeof searchParamsParsers>>[0]
type SearchParamsSetter = ReturnType<typeof useQueryStates<typeof searchParamsParsers>>[1]

type ComponentProps = {
  state: SearchParamsState
  setState: SearchParamsSetter
}

const [state, setState] = useQueryStates(searchParamsParsers)

This way the component props stay in sync with whatever key/values you add or change in the searchParamsParsers object.

[Kavan72]

@franky47 working but this is annoying when you have diff file where you have put all your types

[Kavan72]

@franky47 i guess there is some problem when use parseAsArrayOf

1. when i update array value, it's render twice

setFilter(previousState => {
  return {
    leadStatus: [...previousState.leadStatus, value]
  }
})

2. clearOnDefault: true is not working with parseAsArrayOf

[Kavan72]

Thanks you for quick fix, Can't wait to test with latest release 🙌.

For double rendering, it's weird because it's only happening with array types.

[franky47]

Fix released in 1.17.1.

[Kavan72]

@franky47 Is there a way to avoid double rendering? It's causing the API to be called twice for me.

[franky47]

Could you open a dedicated issue for this with reproduction steps and your exact setup please?

[Kavan72]

created #516