Linia „use client”

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 19 z 47.

'use client' wygląda jak przypadkowy ciąg znaków, którego ktoś zapomniał usunąć. Ale nim nie jest: to dyrektywa, która ma dwie zasady warte zapamiętania, bo obie potrafią sprawić problemy.

Zasada 1: musi być pierwszą linią

Przed importami. Przed komentarzami, które mają znaczenie. Pierwsza rzecz w pliku:

'use client';

import { useState } from 'react';

Umieść ją poniżej instrukcji importu, a przestanie być dyrektywą: stanie się bezsensownym wyrażeniem łańcucha znaków, plik pozostanie komponentem serwerowym, a Ty zobaczysz błąd dotyczący hooka, jakbyś nigdy jej nie wpisał. Ta pułapka kosztuje ludzi sporo czasu, bo ta linia jest tuż przed nimi w pliku i wygląda poprawnie.

Zasada 2: oznacza cały plik

Nie ma sposobu, by oznaczyć pojedynczy komponent. Jeśli plik zawiera dyrektywę, wszystko, co zostało w nim zdefiniowane, jest kodem klienckim:

'use client';

function Row() { … }        // komponent kliencki
export default function Table() { … }   // również komponent kliencki

Rozprzestrzenia się też w dół: wszystko, co komponent kliencki importuje i renderuje, również staje się kodem klienckim. Jedna dyrektywa na początku dużego pliku może po cichu wysłać do przeglądarki dużo kodu JavaScript — i właśnie ten problem rozwiązuje następna lekcja.

Wyzwanie

Łatwy

W pliku components/Counter.jsx linia 'use client' znajduje się w niewłaściwym miejscu. Mimo to aplikacja zgłasza błąd hooka.

Przenieś 'use client'; tak, aby była pierwszą linią pliku components/Counter.jsx, nad importem.

Oba komponenty z tego pliku — Counter i renderowany przez niego ResetButton — staną się komponentami klienckimi dzięki tej jednej linii. Nie potrzebujesz drugiej dyrektywy i nie należy jej dodawać.

Spróbuj swoich sił

import './globals.css';

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

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