47ng / nuqs

Type-safe search params state manager for React frameworks - Like useState, but stored in the URL query string.
https://nuqs.47ng.com
MIT License
4.86k stars 104 forks source link

How to update the state when dependencies change #695

Closed adel-bassiony closed 1 month ago

adel-bassiony commented 1 month ago

Context

What's your version of nuqs?

"nuqs": "^2.0.0"

What framework are you using?

Which version of your framework are you using?

next: 14.2.13

Description

In this example, I created nuqs state to set and get the option object and use it in the url, when the items prop change it's not update the state:

    const [selectedOption, setSelectedOption] = useQueryState<Option | null>(name, {
        parse: (value) => items.find((item: Option) => item.id.toString() === value) ?? null,
        serialize: (value): string => parseAsString.withDefault(value?.id.toString() ?? '').serialize(value?.id.toString() ?? ''),
        clearOnDefault: true,
        shallow: false,
    });

How i can update the selectedOption when the items prop chnages or updated ? the items prop is an array i pass it to the component, this array loading it's data from external API, so how i can update it automatically without useEffect ?

Reproduction

I created a new nuqs state and start using it like the above example