Invoking .append() / .set() / .delete() on useSearchParams()[0] on the server has side effects

[depoulo]

I'm using React Router as a...

library

Reproduction

This is a follow-up from #11449 (comment)

Go to https://stackblitz.com/edit/github-z7wmgfsy-hdxy35ti?file=app%2Froutes%2Fhome.tsx and follow the instructions.

This is not a URLSearchParams sheanigan, see

node -e "const sp=new URL('http://example.com/?page=1').searchParams;const page=sp.get('page');sp.delete('page');console.log({page})"
# prints { page: '1' }

System Info

Stackblitz

Used Package Manager

npm

Expected Behavior

No hydration mismatch, variable retrieved via .get() from useSearchParams[0] return value is not mutated by later .set() call to the same return value, just like in the Node.js example.

Actual Behavior

Hydration mismatch, invoking .append() / .set() / .delete() on useSearchParams[0] return value mutates variables retrieved earlier in the execution context.

[timdorr]

I'm not sure I agree with the premise of your example. You're executing non-idempotent code in your component without wrapping in a useEffect. This should break, as the client has the opportunity to process those effects before finalizing the render, whereas the server does not. This doesn't seem like a bug with the library, but a violation of the Rules of React.

[depoulo]

Oh, you pointed me into the right direction – my example is violating https://react.dev/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable, and since the hook return value is not readonly in Typescript I'm not warned about it. My bad, thank you for your time!