La línea 'use client'

Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 19 de 47.

'use client' parece una cadena suelta que alguien olvidó borrar. No lo es: es una directiva, y tiene dos reglas que vale la pena memorizar, porque ambas suelen causar problemas.

Regla 1: debe ser la primera línea

Antes de las importaciones. Antes de los comentarios que importan. Lo primero en el archivo:

'use client';

import { useState } from 'react';

Colócalo debajo de un import y deja de ser una directiva: se convierte en una expresión de cadena sin sentido, el archivo sigue siendo un componente de servidor y recibes el error de hook como si nunca lo hubieras escrito. Este error le cuesta tiempo real a la gente, porque la línea está ahí mismo en el archivo, luciendo correcta.

Regla 2: marca todo el archivo

No hay forma de marcar un solo componente. Si un archivo tiene la directiva, todo lo definido en él es código cliente:

'use client';

function Row() { … }        // cliente
export default function Table() { … }   // cliente también

Y se propaga hacia abajo: cualquier cosa que un componente de cliente importa y renderiza también se convierte en código de cliente. Una sola directiva en la parte superior de un archivo grande puede enviar silenciosamente mucho JavaScript al navegador, que es exactamente el problema que resuelve la siguiente lección.

Desafío

Fácil

components/Counter.jsx tiene una línea 'use client', en el lugar incorrecto. La aplicación falla con el error de hook de todos modos.

Mueve 'use client'; para que sea la primera línea de components/Counter.jsx, encima de la importación.

Ambos componentes en ese archivo, Counter y el ResetButton que renderiza, se convierten en componentes de cliente a partir de esa única línea. No necesitas una segunda directiva y no deberías agregar una.

Pruébalo tú mismo

import './globals.css';

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

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