The 'use client' Line

Part of the Next.js Essentials section of Coddy's React journey — lesson 19 of 47.

'use client' looks like a stray string someone forgot to delete. It isn't: it's a directive, and it has two rules worth memorising, because both of them bite people.

Rule 1: it must be the first line

Before the imports. Before comments that matter. The very first thing in the file:

'use client';

import { useState } from 'react';

Push it below an import and it stops being a directive: it becomes a pointless string expression, the file stays a server component, and you get the hook error as if you'd never typed it. This one costs people real time, because the line is right there in the file, looking correct.

Rule 2: it marks the whole file

There's no way to mark one component. If a file has the directive, everything defined in it is client code:

'use client';

function Row() { … }        // client
export default function Table() { … }   // client too

And it spreads downward: anything a client component imports and renders becomes client code as well. One directive at the top of a big file can quietly send a lot of JavaScript to the browser, which is exactly the problem the next lesson solves.

Challenge

Easy

components/Counter.jsx has a 'use client' line, in the wrong place. The app fails with the hook error anyway.

Move 'use client'; so it is the first line of components/Counter.jsx, above the import.

Both components in that file, Counter and the ResetButton it renders, become client components from that one line. You don't need a second directive, and you shouldn't add one.

Try it yourself

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}