La riga 'use client'

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 19 di 47.

'use client' sembra una stringa fuori posto che qualcuno si è dimenticato di eliminare. Non è così: è una direttiva e ha due regole che vale la pena memorizzare, perché entrambe possono creare problemi.

Regola 1: deve essere la prima riga

Prima degli import. Prima dei commenti importanti. La primissima cosa nel file:

'use client';

import { useState } from 'react';

Spostala sotto un import e smette di essere una direttiva: diventa un’espressione di stringa inutile, il file resta un componente server e ricevi l’errore dell’hook come se non l’avessi mai digitata. Questo errore fa perdere tempo sul serio, perché la riga è proprio lì nel file e sembra corretta.

Regola 2: contrassegna l'intero file

Non c'è modo di contrassegnare un singolo componente. Se un file contiene la direttiva, tutto ciò che vi è definito è codice client:

'use client';

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

E si propaga verso il basso: tutto ciò che un componente client importa e renderizza diventa a sua volta codice client. Una sola direttiva all’inizio di un file di grandi dimensioni può inviare silenziosamente molto JavaScript al browser, ed è proprio questo il problema che risolve la lezione successiva.

Sfida

Facile

components/Counter.jsx ha una riga 'use client', nella posizione sbagliata. In ogni caso, l'app non funziona a causa dell'errore relativo agli hook.

Sposta 'use client'; in modo che sia la prima riga di components/Counter.jsx, prima dell'import.

Entrambi i componenti in quel file, Counter e ResetButton che viene renderizzato, diventano componenti client con quella singola riga. Non ti serve una seconda direttiva e non dovresti aggiungerne una.

Provalo tu

import './globals.css';

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

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