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.0.0

Framework

• React
• Solid
• Vue

Browser

Chrome

Additional Information

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

[juliomuhlbauer]

2023-11-17.11-06-22.mp4

[juliomuhlbauer]

Also, it would be cool seeing an example of integrating Ark and Nextjs with url on state

[segunadebayo]

I looked into this deeply today and found that it's a Next.js bug

vercel/next.js#43691
vercel/next.js#49881

In the meantime, you can use the good'ol history.pushState

const handleChange = (details) => {
        const params = new URLSearchParams(searchParams)
        params.set('city', value[0])
       // workaround until Next.js fix
        window.history.pushState(
          {},
          '',
          `/search-param?${params.toString()}`
         )
     }
}

[juliomuhlbauer]

But how do I read from the url with Nextjs? It would cause hydration problems

[juliomuhlbauer]

I opened an issue on Nextjs: vercel/next.js#58684