Updating state with useSearchParams on Select component causes multiple reenders

[juliomuhlbauer]

Description

When using Nexjjs's useSearchParams hook with Select component causes multiple reenders.

Link to Reproduction (or Detailed Explanation)

https://use-search-param-ark.vercel.app/search-param

Steps to Reproduce

1. Go to the reproduction
2. Open console
3. Change the select value

Ark UI Version

1.1.0

Framework

• React
• Solid
• Vue

Browser

No response

Additional Information

GitHub Repo: https://github.com/juliomuhlbauer/use-search-param-ark

Context:
I had opened an issue first on next-usequerystate 47ng/nuqs#370, but it wasn't the problem.
Then I opened an issue in Ark: #1738 and Nextjs: vercel/next.js#58684

We tested different solutions. And I think the problem is with Ark UI.

I also tested with Radix and it is working fine: https://use-search-param-ark.vercel.app/search-param-radix

2023-12-03.16-30-48.mp4

[juliomuhlbauer]

Seems like adding a key to the Select works.
But I don't think is a clever solution as it reenders the component every searchParam change and it would be a bad DX for devs using Nextjs.

2023-12-03.16-40-43.mp4

[juliomuhlbauer]

In Remix causes the same issue: https://search-param-remix.vercel.app/ (update the state and check the console, it doesn't block the render like Nextjs but it causes multiple reenders too, so it must not be a Nextjs error)
https://github.com/juliomuhlbauer/search-param-remix

2023-12-03.18-01-22.mp4

[cschroeter]

@juliomuhlbauer

After reviewing the issue, it appears there's also a concern related to Radix.

Currently, the solution from our end is unclear. If you identify the root cause and believe a fix can be implemented within Ark, please feel free to reopen this issue. We're closing it for now due to the lack of a clear resolution path.

[juliomuhlbauer]

I think this issue should be opened for reference of the bug and how to come up with a termporary solution. Because is certainly a Ark/Zag bug.

Radix and Ariakit is working fine with Nextjs and ARK is not working great with Remix and Nextjs.

Radix + Nextjs:
Repo: https://github.com/juliomuhlbauer/use-search-param-ark/tree/main/src/app/search-param-radix/page.tsx
Demo: https://use-search-param-ark.vercel.app/search-param-radix

2023-12-05.12-45-53.mp4

Nextjs + Ariakit:
Repo: https://github.com/juliomuhlbauer/use-search-param-ark/blob/main/src/app/search-param-ariakit/page.tsx
Demo: https://use-search-param-ark.vercel.app/search-param-ariakit?city=Jambeiro

2023-12-05.13-27-23.mp4

Remix + Ark:
Repo: https://github.com/juliomuhlbauer/search-param-remix
Demo: https://search-param-remix.vercel.app/

2023-12-05.12-46-16.mp4