Next.js 15: useState only works in Client Components
Error: useState only works in Client Components. Add the "use client" directive at the top of the file to use it.
Read more: https://nextjs.org/docs/app/building-your-application/rendering/client-components
Immediate Remediation
bash
sed -i '1i "use client";' src/components/MyComponent.tsx
Root Cause Analysis
The component uses React hooks (like useState) in a Server Component, which is not allowed. Server Components are rendered on the server and cannot use client-side hooks. Adding the 'use client' directive marks the file as a Client Component, enabling hooks.
Verification & Guardrails
- Only add 'use client' if the component truly needs client-side interactivity; otherwise, consider moving hooks to a child Client Component.
- Ensure the directive is at the very top of the file, before any imports.
- This error can also occur with other hooks like useEffect, useReducer, etc.
Have a custom or uncategorized crash?
Run your trace through our in-memory client privacy sandbox for instant SRE remediation.