useParam not working as expected on first render

[gabrielEloy]

When using the useParam hook to retrieve URL params during the application's first render, the value returned by the hook is undefined

for instance, given we insert the URL:

http://localhost:3000/example-route?query=test+my+friend

the following snippet

const Example = () => {
const [query, setQuery] = useParam("query");

useEffect(() => {
console.log({query});
}, []);

return (<View><Text>test component</Text></View>)
}

the consoled value will be:

[nandorojo]

i believe this is known behavior from useRouter() from Next.js, presumably to have the same props on the client/server and avoid hydration issues of static rendering. at least that’s my best guess

[nandorojo]

i think it has the right parameter on first render for dynamic parameters, right? /artists/[slug] should have slug on the first render i assume

[nandorojo]

keep in mind that this is why useParam offers parse and initial options (on the web side only)

also, it returns an optional type, so you should always be null checking your query param variables, since they are never guaranteed to exist.

[nandorojo]

To get around this, you probably need to use Next.js' getServerSideProps to enable dynamic SSR. Otherwise, this is working the same way that Next.js' router would.