La ligne 'use client'

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 19 sur 47.

'use client' ressemble à une chaîne de caractères oubliée que quelqu'un aurait omis de supprimer. Ce n'est pas le cas : c'est une directive, et elle comporte deux règles qu'il vaut la peine de mémoriser, car elles piègent souvent les développeurs.

Règle 1 : elle doit être la première ligne

Avant les importations. Avant les commentaires importants. Tout au début du fichier :

'use client';

import { useState } from 'react';

Placez-le sous un `import` et cela cesse d'être une directive : cela devient une expression de chaîne inutile, le fichier reste un composant serveur, et vous obtenez l'erreur de hook comme si vous ne l'aviez jamais tapée. Celle-ci fait perdre un temps précieux, car la ligne est bien présente dans le fichier et semble correcte.

Règle 2 : elle marque l'ensemble du fichier

Il n'y a aucun moyen de marquer un seul composant. Si un fichier contient la directive, tout ce qui y est défini est du code client :

'use client';

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

Et cela se propage vers le bas : tout ce qu'un composant client importe et restitue devient également du code client. Une seule directive en haut d'un grand fichier peut discrètement envoyer beaucoup de JavaScript au navigateur, ce qui est exactement le problème que la leçon suivante résout.

Défi

Facile

components/Counter.jsx contient une ligne 'use client', mais au mauvais endroit. L'application échoue avec l'erreur de hook quoi qu'il en soit.

Déplacez 'use client'; pour qu'elle soit la première ligne de components/Counter.jsx, au-dessus de l'import.

Les deux composants de ce fichier, Counter et le ResetButton qu'il rend, deviennent des composants client grâce à cette seule ligne. Vous n'avez pas besoin d'une deuxième directive, et vous ne devriez pas en ajouter une.

Essayez vous-même

import './globals.css';

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

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