hooks inside dynamic routes

[west flare]

how do i use hooks with dynamic routes if the page is async? linter is complaining about hooks being called inside async function

[cyan thistle]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[dapper flint]

You need to be inside a Client boundary in order to use Hooks (most of them)
For that, your file needs to be annotated with "use client" at the very top, this will turn your components declared inside and all the component imports turn into Client components

"use client";

import { useState } from "react";

export function MyClientComponent() {
    const [state, setState] = useState( ... );
    // ...
}

[west flare]

how do i access the params with use client?

interface BoxProps {
  params: Promise<{ id: string }>;
}

export default async function Foo({ params }: BoxProps) {
  // ...
}

[dapper flint]

useParams hook

Next.js provides that hook

[west flare]

ohh thankss i don't know that, i tried searching around the documentation and i haven't seen it

[dapper flint]

https://nextjs.org/docs/app/api-reference/functions/use-params

'use client'
 
import { useParams } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const params = useParams<MyParamsType>() 
  return '...'
}

[west flare]

thank you

[dapper flint]

Of course