When navigating using forward/back 'parseAsNativeArrayOf' does not trigger state-change

[Alexolo]

Context

What's your version of nuqs?

2.7.0

What framework are you using?

• ✅ React Router

Which version of your framework are you using?

        "react-router-dom": "6.11.2"

Description

Just updated to 2.7.0 to make use of the 'parseAsNativeArrayOf' parser since it better aligns with my backend.

My toggle-button-group allows for multiple selections, and when using the buttons to click, the url updates correctly, same with deselecting.

My issue is when i use the 'history: "push"' option to be able to use the back button for previous states, changes are not emitted. I have checked and if i use 'parseAsArrayOf' the state updates correctly using forward/back navigation.

Reproduction

[franky47]

Thanks, do you have a minimal reproduction I could try please?

cc @TkDodo

[Alexolo]

Here you go. When selecting multiple from the 1-5 and then navigating using back-button, there is no change.
When doing the same with the 11-55, it is possible to navigate forward/back and the change is triggering.

import { Paper, ToggleButton, ToggleButtonGroup } from "@mui/material"
import {
    parseAsArrayOf,
    parseAsInteger,
    parseAsNativeArrayOf,
    useQueryState,
} from "nuqs"

export function Home() {
    const nativeArrayNumber = [1, 2, 3, 4, 5]
    const arrayNumbers = [11, 22, 33, 44, 55]

    // this works
    const [array, setarray] = useQueryState(
        "array",
        parseAsArrayOf<number>(parseAsInteger).withOptions({ history: "push" })
    )

    // this does not allow forward/back navigation
    const [nativeArray, setnativeArray] = useQueryState(
        "nativeArray",
        parseAsNativeArrayOf<number>(parseAsInteger).withOptions({ history: "push" })
    )

    return (
        <Paper>
            <ToggleButtonGroup
                value={nativeArray}
                onChange={(_, change) => setnativeArray(change)}
            >
                {nativeArrayNumber.map(i => (
                    <ToggleButton key={i} value={i}>
                        {i}
                    </ToggleButton>
                ))}
            </ToggleButtonGroup>
            <ToggleButtonGroup
                value={array}
                onChange={(_, change) => setarray(change)}
            >
                {arrayNumbers.map(i => (
                    <ToggleButton key={i} value={i}>
                        {i}
                    </ToggleButton>
                ))}
            </ToggleButtonGroup>
        </Paper>
    )
}
export default Home

[TkDodo]

a quick investigation shows that we’re getting a “state change” inside this effect when using parseAsArray, but not when using the MultiParser:

nuqs/packages/nuqs/src/useQueryStates.ts

Lines 172 to 182 in 8f89690

	if (hasChanged) {
	debug('[nuq+ %s `%s`] State changed: %O', hookId, stateKeys, {
	state,
	initialSearchParams,
	queuedQueries,
	queryRef: queryRef.current,
	stateRef: stateRef.current
	})
	stateRef.current = state
	setInternalState(state)
	}

[TkDodo]

I think it’s related to the effect dependency here:

nuqs/packages/nuqs/src/useQueryStates.ts

Lines 184 to 189 in 8f89690

	Object.values(resolvedUrlKeys)
	.map(key => `${key}=${initialSearchParams?.get(key)}`)
	.join('&'),
	JSON.stringify(queuedQueries)
	])

the component re-renders, but the effect doesn’t fire :/

[franky47]

@Alexolo could you try the preview build and let us know if it fixes the issue on your end please?

pnpm add https://pkg.pr.new/nuqs@1163

[Alexolo]

@franky47 looks like it works now. Both the minimum example, as well as my original code where i noticed it the first time.

Had to cheat a bit since im using yarn, where that is the resolved url for the link you sent. (If someone has issues with it in the future)
yarn add nuqs@https://pkg.pr.new/47ng/nuqs/nuqs@7222c2258abf0f526935c521dd79c62ccf50f32c.tgz

[franky47]

Ah good feedback for the yarn link, thanks, I need to update the pkg.pr.new message to include all package managers really (and the pinned by Git SHA-1 link).

This should land in 2.7.1 tonight.

[github-actions]

🎉 This issue has been resolved in version 2.7.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀