47ng / 47ng/nuqs

[bug] dynamic default values do not properly update

Aperta
#1,193 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub
bug
Lingua principale
TypeScript
Stelle
10.8k
Fork
294
Merge medio
1g 16h
PR unite (30g)
21

Descrizione

## Context

What's your version of `nuqs`?

```
2.7.2
```

What framework are you using?

- ✅ Next.js (app router)

Which version of your framework are you using?

next 14.2.33

## Description

There are 2 issues related to dynamic default values (changing the value passed to `withDefault` at runtime). From some trial and error, it looks like these both worked in nuqs 2.3.0 and are broken in 2.3.1.

1. If the defaultValue changes at runtime, it partially updates but is out of sync. The new default value will clear the query param, but will set the value to the old default value.

It looks like this is fixed by adding `defaultValues` to the dependency array [here](https://github.com/47ng/nuqs/blob/026eaa475b7a1ed8820cb21432d1c69ae2ab5223/packages/nuqs/src/useQueryStates.ts#L268)

2. If the default value (and by extension, the value) is an object, the default value never updates. This appears to be because the dependency array tries to check it as a string value, meaning no matter what, it sees an unchanging `[object Object]`

Changing [this line](https://github.com/47ng/nuqs/blob/026eaa475b7a1ed8820cb21432d1c69ae2ab5223/packages/nuqs/src/useQueryStates.ts#L110) to `.map(({ defaultValue }) => JSON.stringify(defaultValue))` seems to fix that

## Reproduction

Example: Steps to reproduce the behavior:

1. Go to https://codesandbox.io/p/devbox/g8gmlp
2. Change the first input to "def"
3. Type "def" into the second input
4. The query param is cleared, but the input changes to "abc" (the default value in the code)

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

The issue points to specific lines in packages/nuqs/src/useQueryStates.ts (lines 268 and 110). Start by examining the dependency array logic for defaultValues and the serialization of object defaults. The reproduction in the provided CodeSandbox link demonstrates the bug. To verify a fix, run the existing tests for useQueryStates and create a new test case for dynamic default values with objects.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
next.js, react, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Specificata chiaramente
Idoneità per principianti
55/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.