'use client'

React 🟡 Mid

Definition

Directive qui marque un composant comme Client Component, activant l'interactivite (state, effets, handlers). Frontiere entre serveur et client dans l'arbre.

Analogie

Comme le panneau 'zone libre-service' dans un magasin : a partir de la, c'est le client qui interagit.

Exemple de code

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Cas d'usage

Composants interactifs : formulaires, boutons, modales, tout ce qui a besoin de state ou d'event handlers.

Anti-pattern

Mettre 'use client' a la racine de l'app, perdant tous les avantages des Server Components.
#rendering#react19#nextjs