A Linha 'use client'

Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 19 de 47.

'use client' parece uma string perdida que alguém esqueceu de deletar. Não é: é uma diretiva, e tem duas regras que valem a pena memorizar, porque ambas costumam pegar as pessoas de surpresa.

Regra 1: deve ser a primeira linha

Antes dos imports. Antes dos comentários que importam. A primeira coisa no arquivo:

'use client';

import { useState } from 'react';

Coloque-a abaixo de um import e ela deixa de ser uma diretiva: torna-se uma expressão de string inútil, o arquivo permanece como um server component e você recebe o erro de hook como se nunca a tivesse digitado. Esta custa tempo real às pessoas, porque a linha está bem ali no arquivo, parecendo correta.

Regra 2: isso marca o arquivo inteiro

Não há como marcar apenas um componente. Se um arquivo tem a diretiva, tudo o que for definido nele é código client:

'use client';

function Row() { … }        // cliente
export default function Table() { … }   // cliente também

E isso se espalha para baixo: qualquer coisa que um componente client importa e renderiza se torna código client também. Uma diretiva no topo de um arquivo grande pode silenciosamente enviar muito JavaScript para o navegador, que é exatamente o problema que a próxima lição resolve.

Desafio

Fácil

components/Counter.jsx tem uma linha 'use client' no lugar errado. O app falha com o erro de hook mesmo assim.

Mova 'use client'; para que seja a primeira linha de components/Counter.jsx, acima do import.

Ambos os componentes nesse arquivo, Counter e o ResetButton que ele renderiza, tornam-se client components a partir dessa única linha. Você não precisa de uma segunda diretiva e não deve adicionar uma.

Experimente você mesmo

import './globals.css';

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

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