Why do I get 'useState is not a function' or 'onClick' errors in a Next.js App Router component? #36
Answered
by
Kevinchamplin
Kevinchamplin
asked this question in
Q&A
Why do I get 'useState is not a function' or 'onClick' errors in a Next.js App Router component?
#36
-
|
Why do I get 'useState is not a function' or 'onClick' errors in a Next.js App Router component? |
Beta Was this translation helpful? Give feedback.
Answered by
Kevinchamplin
Jun 13, 2026
Replies: 1 comment
-
|
In the App Router, components are React Server Components by default, and Server Components can't use state, effects, or event handlers — those only run on the client. Add the "use client" directive at the very top of the file for any component that needs useState/useEffect/onClick, and keep it as a small leaf so most of your tree stays server-rendered. |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
Kevinchamplin
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
In the App Router, components are React Server Components by default, and Server Components can't use state, effects, or event handlers — those only run on the client. Add the "use client" directive at the very top of the file for any component that needs useState/useEffect/onClick, and keep it as a small leaf so most of your tree stays server-rendered.