react-router icon indicating copy to clipboard operation
react-router copied to clipboard

Updating search params using `useSearchParams` seems to trigger more than one render

Open hasanayan opened this issue 1 year ago • 0 comments

Reproduction

https://stackblitz.com/edit/remix-run-remix-nri7k8?file=app%2Froutes%2F_index.tsx

Click set param button and you'll see that the history stack will have 5 items (4 re-renders because of changing searchParams) instead of 2 and the first 2 re-renders will get the unchanged value of the search param

System Info

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 75.69 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 10.5.2 - /usr/local/bin/npm
    pnpm: 9.1.3 - /usr/local/bin/pnpm
    bun: 1.1.10 - ~/#####REDACTED#####/node_modules/.bin/bun
    Watchman: 2024.04.15.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 125.0.6422.113
    Safari: 17.4.1

Used Package Manager

npm

Expected Behavior

updating search params using useSearchParams should trigger only one re-render

Actual Behavior

updating search params using useSearchParams is causing 4 (3 extra) re-renders. and the first 2 re-renders gets the unchanged value of the search param

hasanayan avatar May 30 '24 17:05 hasanayan