nextjs component_error ai_generated true

Error: useState/useEffect can only be used in Client Components. Add 'use client' directive

ID: nextjs/use-client-directive

Also available as: JSON · Markdown
98%Fix Rate
95%Confidence
50Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
14 active — — —

Root Cause

Using React hooks in a Server Component. App Router defaults all components to Server Components.

generic

Workarounds

  1. 98% success Add 'use client' directive at the top of the file that uses hooks 
    'use client';
import { useState } from 'react';

    Sources: https://nextjs.org/docs/app/building-your-application/rendering/client-components

  2. 92% success Split into Server (data fetching) + Client (interactive) components 
    data fetching

    Sources: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns

Dead Ends

Common approaches that don't work:

  1. Mark every component as 'use client' 70% fail

    Defeats the purpose of Server Components — only mark interactive ones

  2. Move state management to a global store 65% fail

    Over-engineering for simple interactive components

Error Chain

Frequently confused with: