1// React 18 vs React 19 - Comparaison
2
3// ❌ React 18 - Verbeux avec forwardRef et useMemo
4import { forwardRef, useMemo, useCallback } from 'react';
5
6const Button = forwardRef<HTMLButtonElement, ButtonProps>(
7  ({ onClick, children }, ref) => {
8    const handleClick = useCallback(() => {
9      onClick();
10    }, [onClick]);
11
12    const computedValue = useMemo(() => {
13      return expensiveCalculation();
14    }, []);
15
16    return (
17      <button ref={ref} onClick={handleClick}>
18        {children}
19      </button>
20    );
21  }
22);
23
24// ✅ React 19 - Simplifié avec Compiler et refs as props
25function Button({ ref, onClick, children }: ButtonProps) {
26  // Le React Compiler gère automatiquement la memoization
27  const handleClick = () => onClick();
28  const computedValue = expensiveCalculation();
29
30  return (
31    <button ref={ref} onClick={handleClick}>
32      {children}
33    </button>
34  );
35}

1// Migration Step-by-Step
2
3// 1. Mettre à jour les dépendances
4{
5  "dependencies": {
6    "react": "^19.0.0",
7    "react-dom": "^19.0.0"
8  }
9}
10
11// 2. Remplacer ReactDOM.render par createRoot (si pas déjà fait)
12// ❌ Ancien
13import ReactDOM from 'react-dom';
14ReactDOM.render(<App />, document.getElementById('root'));
15
16// ✅ Nouveau
17import { createRoot } from 'react-dom/client';
18const root = createRoot(document.getElementById('root')!);
19root.render(<App />);
20
21// 3. Supprimer les forwardRef inutiles
22// ❌ Avant
23const Input = forwardRef<HTMLInputElement, InputProps>(
24  (props, ref) => <input ref={ref} {...props} />
25);
26
27// ✅ Après
28function Input({ ref, ...props }: InputProps) {
29  return <input ref={ref} {...props} />;
30}
31
32// 4. Renommer useFormState en useActionState
33// ❌ Avant
34import { useFormState } from 'react-dom';
35
36// ✅ Après
37import { useActionState } from 'react';
38
39// 5. Activer le React Compiler (optionnel mais recommandé)
40// babel.config.js
41module.exports = {
42  plugins: [
43    ['babel-plugin-react-compiler', {
44      target: '19'
45    }]
46  ]
47};

1// Exemple 1 : Lire une Promise avec use()
2import { use, Suspense } from 'react';
3
4// Promise stable (créée en dehors du composant ou avec useMemo)
5const userPromise = fetchUser(userId);
6
7function UserProfile() {
8  // use() suspend le rendu jusqu'à la résolution
9  const user = use(userPromise);
10
11  return (
12    <div>
13      <h1>{user.name}</h1>
14      <p>{user.email}</p>
15    </div>
16  );
17}
18
19// Wrapper avec Suspense obligatoire
20export function UserProfilePage() {
21  return (
22    <Suspense fallback={<div>Chargement...</div>}>
23      <UserProfile />
24    </Suspense>
25  );
26}

1// Exemple 2 : Utilisation Conditionnelle (IMPOSSIBLE avec useContext)
2import { use } from 'react';
3import { ThemeContext } from './theme-context';
4
5function Button({ variant }: ButtonProps) {
6  // ✅ use() PEUT être appelé après un early return
7  if (variant === 'unstyled') {
8    return <button>Click me</button>;
9  }
10
11  // Lecture du context seulement si nécessaire
12  const theme = use(ThemeContext);
13
14  return (
15    <button style={{ backgroundColor: theme.primaryColor }}>
16      Styled Button
17    </button>
18  );
19}
20
21// ❌ Impossible avec useContext (violera les Rules of Hooks)
22function ButtonWrong({ variant }: ButtonProps) {
23  if (variant === 'unstyled') {
24    return <button>Click me</button>;
25  }
26
27  // ❌ ERREUR: useContext appelé conditionnellement
28  const theme = useContext(ThemeContext);
29
30  return <button>...</button>;
31}

1// Pattern : Promise Stable avec useMemo
2import { use, useMemo, Suspense } from 'react';
3
4function UserDashboard({ userId }: { userId: string }) {
5  // ✅ Promise stable grâce à useMemo
6  const userPromise = useMemo(() => {
7    return fetchUser(userId);
8  }, [userId]); // Recréée seulement si userId change
9
10  const user = use(userPromise);
11
12  return <div>Welcome, {user.name}!</div>;
13}
14
15// ❌ Anti-pattern : Promise recréée à chaque render
16function UserDashboardWrong({ userId }: { userId: string }) {
17  // ❌ Nouvelle promise à chaque render = boucle infinie
18  const userPromise = fetchUser(userId);
19  const user = use(userPromise);
20
21  return <div>Welcome, {user.name}!</div>;
22}

1// Pattern : Parallel Loading (éviter les waterfalls)
2import { use, useMemo } from 'react';
3
4function UserWithPosts({ userId }: { userId: string }) {
5  // ✅ Créer TOUTES les promises AVANT de les consommer
6  const promises = useMemo(() => {
7    const userPromise = fetchUser(userId);
8    const postsPromise = fetchPosts(userId);
9    return { userPromise, postsPromise };
10  }, [userId]);
11
12  // Consommer en parallèle
13  const user = use(promises.userPromise);
14  const posts = use(promises.postsPromise);
15
16  return (
17    <div>
18      <h1>{user.name}</h1>
19      <ul>
20        {posts.map(post => <li key={post.id}>{post.title}</li>)}
21      </ul>
22    </div>
23  );
24}
25
26// ❌ Anti-pattern : Waterfall (séquentiel)
27function UserWithPostsWrong({ userId }: { userId: string }) {
28  const userPromise = useMemo(() => fetchUser(userId), [userId]);
29  const user = use(userPromise); // Attend user...
30
31  // ❌ posts ne commence à charger QUE quand user est résolu
32  const postsPromise = useMemo(() => fetchPosts(userId), [userId]);
33  const posts = use(postsPromise);
34
35  return <div>...</div>;
36}

1// Pattern : Error Handling avec use() et Error Boundary
2import { use, Suspense } from 'react';
3import { ErrorBoundary } from 'react-error-boundary';
4
5function DataComponent({ dataPromise }: { dataPromise: Promise<Data> }) {
6  const data = use(dataPromise); // Si reject, throw l'erreur
7
8  return <div>{data.content}</div>;
9}
10
11export function DataPage() {
12  const dataPromise = useMemo(() => fetchData(), []);
13
14  return (
15    <ErrorBoundary
16      fallback={<div>Erreur lors du chargement</div>}
17      onError={(error) => console.error(error)}
18    >
19      <Suspense fallback={<div>Chargement...</div>}>
20        <DataComponent dataPromise={dataPromise} />
21      </Suspense>
22    </ErrorBoundary>
23  );
24}

1// Installation et Configuration
2// 1. Installer le plugin Babel
3npm install --save-dev babel-plugin-react-compiler
4
5// 2. Configuration Babel
6// babel.config.js
7module.exports = {
8  plugins: [
9    ['babel-plugin-react-compiler', {
10      target: '19', // Version de React
11      runtimeModule: 'react/compiler-runtime'
12    }]
13  ]
14};
15
16// 3. Pour Vite
17// vite.config.ts
18import { defineConfig } from 'vite';
19import react from '@vitejs/plugin-react';
20
21export default defineConfig({
22  plugins: [
23    react({
24      babel: {
25        plugins: [['babel-plugin-react-compiler', { target: '19' }]]
26      }
27    })
28  ]
29});

1// Avant : React 18 avec useMemo/useCallback manuel
2import { useMemo, useCallback, memo } from 'react';
3
4function ExpensiveComponent({ data, onUpdate }: Props) {
5  // ❌ Verbeux : callback memoization manuelle
6  const handleClick = useCallback(() => {
7    onUpdate(data.id);
8  }, [onUpdate, data.id]);
9
10  // ❌ Verbeux : calcul memoizé manuellement
11  const processedData = useMemo(() => {
12    return data.items.map(item => ({
13      ...item,
14      computed: expensiveCalculation(item)
15    }));
16  }, [data.items]);
17
18  // ❌ Verbeux : sous-composant memoizé
19  const ListItem = memo(({ item }: { item: Item }) => (
20    <div>{item.name}</div>
21  ));
22
23  return (
24    <div onClick={handleClick}>
25      {processedData.map(item => (
26        <ListItem key={item.id} item={item} />
27      ))}
28    </div>
29  );
30}
31
32export default memo(ExpensiveComponent);

1// Après : React 19 avec Compiler (automatique)
2function ExpensiveComponent({ data, onUpdate }: Props) {
3  // ✅ Le Compiler gère la memoization automatiquement
4  const handleClick = () => {
5    onUpdate(data.id);
6  };
7
8  // ✅ Memoization automatique du calcul
9  const processedData = data.items.map(item => ({
10    ...item,
11    computed: expensiveCalculation(item)
12  }));
13
14  // ✅ Pas besoin de memo() pour les sous-composants
15  function ListItem({ item }: { item: Item }) {
16    return <div>{item.name}</div>;
17  }
18
19  return (
20    <div onClick={handleClick}>
21      {processedData.map(item => (
22        <ListItem key={item.id} item={item} />
23      ))}
24    </div>
25  );
26}
27
28// ✅ Pas besoin de memo() wrapper
29export default ExpensiveComponent;

1// Cas où useMemo reste pertinent
2import { useMemo } from 'react';
3
4function DataProcessor({ rawData }: Props) {
5  // ✅ Calcul VRAIMENT coûteux : garder useMemo
6  const parsedData = useMemo(() => {
7    // Parsing de 10MB de JSON + transformations lourdes
8    const parsed = JSON.parse(rawData);
9    return complexTransformation(parsed); // 100ms+
10  }, [rawData]);
11
12  // ✅ WeakMap nécessite référence stable
13  const cache = useMemo(() => new WeakMap(), []);
14
15  // ❌ Calcul simple : laisser le Compiler gérer
16  const count = data.length; // Pas besoin de useMemo ici
17
18  return <div>{parsedData.summary}</div>;
19}

1// Opt-out du Compiler pour un composant spécifique
2'use no memo'; // Directive spéciale
3
4function LegacyComponent({ data }: Props) {
5  // Ce composant ne sera PAS optimisé par le Compiler
6  // Utile pour des composants avec logique complexe non-standard
7  const result = complexLegacyLogic(data);
8
9  return <div>{result}</div>;
10}

1// Server Component (dans un framework supportant les RSC)
2import { prisma } from '@/lib/db';
3
4// ✅ Async component - SEULEMENT possible en Server Component
5export default async function UserList() {
6  // ✅ Accès direct à la DB - Pas besoin d'API route
7  const users = await prisma.user.findMany({
8    select: { id: true, name: true, email: true }
9  });
10
11  // ✅ Ce code ne sera JAMAIS envoyé au client
12  const API_SECRET = process.env.SECRET_KEY; // Sécurisé !
13
14  return (
15    <div>
16      <h1>Users ({users.length})</h1>
17      <ul>
18        {users.map(user => (
19          <li key={user.id}>{user.name} - {user.email}</li>
20        ))}
21      </ul>
22    </div>
23  );
24}
25
26// Caractéristiques :
27// - Pas de 'use client'
28// - Peut être async
29// - Accès direct DB/filesystem
30// - Pas de useState, useEffect, onClick, etc.
31// - Zéro JS envoyé au client

1// Client Component - Pour l'interactivité
2'use client'; // ⚠️ Directive obligatoire
3
4import { useState } from 'react';
5
6export function Counter() {
7  // ✅ Hooks autorisés dans Client Components
8  const [count, setCount] = useState(0);
9
10  return (
11    <div>
12      <p>Count: {count}</p>
13      {/* ✅ Event handlers autorisés */}
14      <button onClick={() => setCount(count + 1)}>
15        Increment
16      </button>
17    </div>
18  );
19}
20
21// Caractéristiques :
22// - Directive 'use client' en haut du fichier
23// - Tous les hooks React disponibles
24// - Event handlers (onClick, onChange, etc.)
25// - Browser APIs (window, document, localStorage)
26// - Ce composant + ses dépendances = envoyés au client

1// Pattern : Server Component parent avec Client Component enfant
2import { prisma } from '@/lib/db';
3import { LikeButton } from '@/components/like-button'; // Client Component
4
5// ✅ Server Component (async)
6export default async function PostPage({ params }: { params: { id: string } }) {
7  // Fetch côté serveur
8  const post = await prisma.post.findUnique({
9    where: { id: params.id },
10    include: { author: true, likes: true }
11  });
12
13  return (
14    <article>
15      <h1>{post.title}</h1>
16      <p>Par {post.author.name}</p>
17      <div>{post.content}</div>
18
19      {/* ✅ Client Component pour l'interactivité */}
20      <LikeButton postId={post.id} initialLikes={post.likes.length} />
21    </article>
22  );
23}
24
25// components/like-button.tsx (Client)
26'use client';
27import { useState } from 'react';
28
29export function LikeButton({ postId, initialLikes }: Props) {
30  const [likes, setLikes] = useState(initialLikes);
31
32  return (
33    <button onClick={() => setLikes(likes + 1)}>
34      ❤️ {likes} likes
35    </button>
36  );
37}

1// Pattern Avancé : Client wrapper avec Server children
2// components/tabs.tsx (Client Component)
3'use client';
4import { useState, ReactNode } from 'react';
5
6export function Tabs({ children }: { children: ReactNode }) {
7  const [activeTab, setActiveTab] = useState(0);
8
9  return (
10    <div>
11      {/* Interactivité gérée ici */}
12      <div className="tabs">
13        <button onClick={() => setActiveTab(0)}>Tab 1</button>
14        <button onClick={() => setActiveTab(1)}>Tab 2</button>
15      </div>
16
17      {/* ✅ children peut être un Server Component ! */}
18      <div className="tab-content">{children}</div>
19    </div>
20  );
21}
22
23// app/dashboard/page.tsx (Server Component)
24import { Tabs } from '@/components/tabs';
25import { prisma } from '@/lib/db';
26
27export default async function Dashboard() {
28  const data = await prisma.metrics.findMany();
29
30  return (
31    <Tabs>
32      {/* ✅ Contenu Server Component dans Client wrapper */}
33      <div>
34        {data.map(metric => (
35          <div key={metric.id}>{metric.value}</div>
36        ))}
37      </div>
38    </Tabs>
39  );
40}

1// Anti-patterns courants
2
3// ❌ ERREUR : useState dans Server Component
4export default async function Page() {
5  const [count, setCount] = useState(0); // ❌ ERREUR !
6  return <div>{count}</div>;
7}
8
9// ❌ ERREUR : onClick dans Server Component
10export default async function Page() {
11  return (
12    <button onClick={() => console.log('click')}> // ❌ ERREUR !
13      Click me
14    </button>
15  );
16}
17
18// ❌ ERREUR : Importer Server Component dans Client Component
19'use client';
20import { ServerData } from './server-data'; // ❌ Server Component !
21
22export function ClientWrapper() {
23  return <ServerData />; // ❌ Ne fonctionnera pas
24}
25
26// ✅ CORRECT : Passer en children
27export function ClientWrapper({ children }: { children: ReactNode }) {
28  return <div className="wrapper">{children}</div>;
29}
30
31// app/page.tsx
32import { ClientWrapper } from './client-wrapper';
33import { ServerData } from './server-data';
34
35export default function Page() {
36  return (
37    <ClientWrapper>
38      <ServerData /> {/* ✅ CORRECT */}
39    </ClientWrapper>
40  );
41}

1// React 18 : Gestion manuelle du loading/error
2import { useState } from 'react';
3
4function FormOld() {
5  const [isPending, setIsPending] = useState(false);
6  const [error, setError] = useState<string | null>(null);
7
8  async function handleSubmit(e: React.FormEvent) {
9    e.preventDefault();
10    setIsPending(true);
11    setError(null);
12
13    try {
14      await submitForm(data);
15    } catch (err) {
16      setError(err.message);
17    } finally {
18      setIsPending(false);
19    }
20  }
21
22  return (
23    <form onSubmit={handleSubmit}>
24      {error && <div className="error">{error}</div>}
25      <button disabled={isPending}>
26        {isPending ? 'Envoi...' : 'Envoyer'}
27      </button>
28    </form>
29  );
30}

1// React 19 : Actions avec useTransition
2import { useTransition } from 'react';
3
4function FormNew() {
5  const [isPending, startTransition] = useTransition();
6
7  async function handleSubmit(e: React.FormEvent) {
8    e.preventDefault();
9
10    // ✅ startTransition accepte maintenant des fonctions async !
11    startTransition(async () => {
12      await submitForm(data);
13      // isPending = true pendant l'exécution
14      // Si une erreur est throw, Error Boundary la catch
15    });
16  }
17
18  return (
19    <form onSubmit={handleSubmit}>
20      <button disabled={isPending}>
21        {isPending ? 'Envoi...' : 'Envoyer'}
22      </button>
23    </form>
24  );
25}

1// Pattern : Form Action avec validation
2import { useTransition } from 'react';
3import { z } from 'zod';
4
5const schema = z.object({
6  email: z.string().email(),
7  password: z.string().min(8)
8});
9
10export function LoginForm() {
11  const [isPending, startTransition] = useTransition();
12
13  async function handleLogin(formData: FormData) {
14    startTransition(async () => {
15      // Validation
16      const data = schema.parse({
17        email: formData.get('email'),
18        password: formData.get('password')
19      });
20
21      // Appel API
22      const response = await fetch('/api/login', {
23        method: 'POST',
24        body: JSON.stringify(data)
25      });
26
27      if (!response.ok) {
28        throw new Error('Login failed');
29      }
30
31      // Redirect ou update UI
32      window.location.href = '/dashboard';
33    });
34  }
35
36  return (
37    <form action={handleLogin}>
38      <input name="email" type="email" required />
39      <input name="password" type="password" required />
40      <button disabled={isPending}>
41        {isPending ? 'Connexion...' : 'Se connecter'}
42      </button>
43    </form>
44  );
45}

1// Pattern : useTransition pour navigation non-bloquante
2import { useTransition, useState } from 'react';
3
4function SearchResults() {
5  const [query, setQuery] = useState('');
6  const [results, setResults] = useState([]);
7  const [isPending, startTransition] = useTransition();
8
9  function handleSearch(e: React.ChangeEvent<HTMLInputElement>) {
10    const value = e.target.value;
11    setQuery(value); // ✅ Update immédiat (UI responsive)
12
13    // ✅ Recherche en transition (non-bloquant)
14    startTransition(async () => {
15      const data = await searchAPI(value);
16      setResults(data);
17    });
18  }
19
20  return (
21    <div>
22      <input
23        value={query}
24        onChange={handleSearch}
25        placeholder="Rechercher..."
26      />
27
28      {/* Visual feedback pendant la recherche */}
29      {isPending && <span className="spinner">⏳</span>}
30
31      <ul style={{ opacity: isPending ? 0.6 : 1 }}>
32        {results.map(item => (
33          <li key={item.id}>{item.title}</li>
34        ))}
35      </ul>
36    </div>
37  );
38}