async apis' change make client components act ridiculously

[FanetheDivine]

look at this innocent client component

'use client'

import { FC, useEffect } from 'react'
import { useParams, useSearchParams } from 'next/navigation'

const Page: FC<any> = (props) => {
 console.log(useSearchParams())
 console.log(useParams())
 console.log(props)
 useEffect(() => {
   console.log(1)
 }, [])
 console.log(2)
 return <span>1</span>
}

export default Page

and below is whatever reported

this component act twice immediately just because now params and searchParams are promises
What's the point of this?
Why must client components accept props of server components?
or the compiler is blind so that it cannot read 'use client' at the top of file?
By the way , a 'NextServerComponentProps' is needed
I cannot stand coding like this

[quasimodo-tech]

Next.js 15 makes useParams() and useSearchParams() return promises in Client Components, causing unexpected re-renders

you can await inside the useEffect() like this.
useEffect(() => {
useParams().then(setParams);
useSearchParams().then((sp) => setSearchParams(Object.fromEntries(sp.entries())));
}, []);

[Netail]

What about:

const Page: FC = (props) => {
	const params = use(props.params);
	const searchParams = use(props.searchParams);
}

https://react.dev/reference/react/use

[FanetheDivine]

it works but cannot avoid complex props type definition

[quasimodo-tech]

Your approach of use(props.params) will not work in Client Components in the same way that use works in Server Components.
Instead, continue using useParams() and useSearchParams() with useEffect() to handle the Promise resolution.