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>
    );
}