1// Probleme : ce composant se re-rend a chaque changement du parent
2// meme si "user" n'a pas change
3
4interface UserCardProps {
5  user: { name: string; email: string };
6}
7
8function UserCard({ user }: UserCardProps) {
9  // Ce console.log s'affiche a CHAQUE render du parent
10  console.log('UserCard render:', user.name);
11
12  // Imaginons un calcul couteux ici...
13  const formattedDate = new Intl.DateTimeFormat('fr-FR', {
14    dateStyle: 'full',
15    timeStyle: 'long',
16  }).format(new Date());
17
18  return (
19    <div className="p-4 border rounded-lg">
20      <h3>{user.name}</h3>
21      <p>{user.email}</p>
22      <span>{formattedDate}</span>
23    </div>
24  );
25}
26
27// Le parent : chaque clic sur le bouton re-rend UserCard
28function Dashboard() {
29  const [count, setCount] = useState(0);
30  const user = { name: 'Alice Dupont', email: 'alice@example.com' };
31
32  return (
33    <div>
34      {/* Ce bouton modifie count, pas user */}
35      <button onClick={() => setCount(c => c + 1)}>
36        Compteur : {count}
37      </button>
38
39      {/* Pourtant UserCard se re-rend a chaque clic */}
40      <UserCard user={user} />
41    </div>
42  );
43}

1// Demonstration : la cascade de re-renders
2
3function App() {
4  const [count, setCount] = useState(0);
5  console.log('App render');       // S'affiche a chaque clic
6
7  return (
8    <div>
9      <button onClick={() => setCount(c => c + 1)}>
10        Incrementer ({count})
11      </button>
12      <Parent />
13    </div>
14  );
15}
16
17function Parent() {
18  console.log('  Parent render');  // S'affiche aussi !
19  return (
20    <div>
21      <Child />
22      <Sibling />
23    </div>
24  );
25}
26
27function Child() {
28  console.log('    Child render'); // S'affiche aussi !
29  return <p>Je suis Child</p>;
30}
31
32function Sibling() {
33  console.log('    Sibling render'); // S'affiche aussi !
34  return <p>Je suis Sibling</p>;
35}
36
37// Console apres un clic sur "Incrementer" :
38// App render
39//   Parent render
40//     Child render
41//     Sibling render
42//
43// Tous les composants se re-executent, meme si
44// aucun d'entre eux ne recoit "count" en prop.

1// Exemple concret : composant "lourd" avec un calcul couteux
2
3interface ProductListProps {
4  products: Product[];
5  category: string;
6}
7
8function ProductList({ products, category }: ProductListProps) {
9  console.log('ProductList render - debut du calcul...');
10
11  // Simulation d'un traitement couteux : filtrage + tri + transformation
12  // Sur 10 000 produits, ce calcul prend ~50ms
13  const filteredProducts = products
14    .filter(p => p.category === category)
15    .sort((a, b) => b.rating - a.rating)
16    .map(p => ({
17      ...p,
18      displayPrice: new Intl.NumberFormat('fr-FR', {
19        style: 'currency',
20        currency: 'EUR',
21      }).format(p.price),
22      slug: p.name.toLowerCase().replace(/\s+/g, '-'),
23    }));
24
25  console.log(`ProductList render - ${filteredProducts.length} produits traites`);
26
27  return (
28    <ul>
29      {filteredProducts.map(product => (
30        <li key={product.id}>
31          {product.name} - {product.displayPrice}
32        </li>
33      ))}
34    </ul>
35  );
36}
37
38// Parent : le compteur de notifications n'a RIEN a voir avec les produits
39function StorePage() {
40  const [notifications, setNotifications] = useState(0);
41  const [products] = useState<Product[]>(generateProducts(10000));
42
43  return (
44    <div>
45      <header>
46        <button onClick={() => setNotifications(n => n + 1)}>
47          Notifications ({notifications})
48        </button>
49      </header>
50
51      {/* Ce composant refait le calcul couteux a chaque clic
52          sur le bouton notifications, pour rien. */}
53      <ProductList products={products} category="electronique" />
54    </div>
55  );
56}

1// Identifier les re-renders couteux avec React DevTools Profiler
2//
3// Etape 1 : Ouvrir React DevTools > onglet "Profiler"
4// Etape 2 : Cliquer sur "Record" (bouton rond)
5// Etape 3 : Effectuer l'interaction a analyser (clic, saisie, etc.)
6// Etape 4 : Cliquer sur "Stop"
7// Etape 5 : Analyser le flamegraph
8
9// Ce que vous voyez dans le flamegraph :
10//
11// [App]              0.2ms
12//   [StorePage]      0.3ms
13//     [Header]       0.1ms
14//     [ProductList]  47.3ms  <-- PROBLEME ICI
15//       [ProductCard] x 842
16//
17// La barre "ProductList" est jaune/rouge = composant lent
18// Les composants gris n'ont pas ete re-rendus
19//
20// Criteres pour decider d'optimiser :
21// - Composant > 16ms (1 frame a 60fps) = a optimiser
22// - Composant > 5ms avec interactions frequentes = a surveiller
23// - Composant < 1ms = ne pas toucher
24
25// Alternative programmatique : React.Profiler
26import { Profiler } from 'react';
27
28function onRenderCallback(
29  id: string,
30  phase: 'mount' | 'update',
31  actualDuration: number, // temps de render en ms
32  baseDuration: number,   // temps sans memoisation
33  startTime: number,
34  commitTime: number,
35) {
36  if (actualDuration > 16) {
37    console.warn(
38      `[Perf] ${id} a pris ${actualDuration.toFixed(1)}ms (${phase})`
39    );
40  }
41}
42
43// Utilisation :
44<Profiler id="ProductList" onRender={onRenderCallback}>
45  <ProductList products={products} category="electronique" />
46</Profiler>

1// Syntaxe de base : envelopper un composant avec React.memo
2
3import { memo } from 'react';
4
5interface UserCardProps {
6  name: string;
7  email: string;
8  role: string;
9}
10
11// Sans memo : se re-rend a CHAQUE render du parent
12function UserCard({ name, email, role }: UserCardProps) {
13  console.log('UserCard render:', name);
14  return (
15    <div className="p-4 border rounded-lg">
16      <h3 className="font-bold">{name}</h3>
17      <p className="text-gray-600">{email}</p>
18      <span className="text-sm bg-blue-100 px-2 py-1 rounded">{role}</span>
19    </div>
20  );
21}
22
23// Avec memo : ne se re-rend QUE si name, email ou role changent
24const MemoizedUserCard = memo(function UserCard({
25  name,
26  email,
27  role,
28}: UserCardProps) {
29  console.log('MemoizedUserCard render:', name);
30  return (
31    <div className="p-4 border rounded-lg">
32      <h3 className="font-bold">{name}</h3>
33      <p className="text-gray-600">{email}</p>
34      <span className="text-sm bg-blue-100 px-2 py-1 rounded">{role}</span>
35    </div>
36  );
37});
38
39// Export direct (pattern le plus courant)
40export default memo(UserCard);

1// CAS 1 : Props primitives - React.memo FONCTIONNE parfaitement
2
3import { memo, useState } from 'react';
4
5const ExpensiveChart = memo(function ExpensiveChart({
6  title,
7  value,
8  showLegend,
9}: {
10  title: string;      // Primitive : comparaison par valeur
11  value: number;      // Primitive : comparaison par valeur
12  showLegend: boolean; // Primitive : comparaison par valeur
13}) {
14  console.log('ExpensiveChart render');
15  // Simulation d'un rendu couteux (graphique SVG complexe)
16  const paths = Array.from({ length: 1000 }, (_, i) => (
17    <path key={i} d={`M${i} ${Math.sin(i) * value}`} />
18  ));
19
20  return (
21    <div>
22      <h3>{title}</h3>
23      <svg>{paths}</svg>
24      {showLegend && <Legend />}
25    </div>
26  );
27});
28
29function Dashboard() {
30  const [notifications, setNotifications] = useState(0);
31
32  return (
33    <div>
34      <button onClick={() => setNotifications(n => n + 1)}>
35        Notifications ({notifications})
36      </button>
37
38      {/* "Revenue mensuelle", 42000 et true ne changent pas
39          entre les renders -> ExpensiveChart ne se re-rend PAS */}
40      <ExpensiveChart
41        title="Revenue mensuelle"    // "Revenue mensuelle" === "Revenue mensuelle" -> true
42        value={42000}                 // 42000 === 42000 -> true
43        showLegend={true}             // true === true -> true
44      />
45      {/* Resultat : le clic sur Notifications ne declenche PAS
46          le re-render de ExpensiveChart */}
47    </div>
48  );
49}

1// CAS 2 : Objets et fonctions inline - React.memo est CONTOURNE
2
3import { memo, useState } from 'react';
4
5const UserProfile = memo(function UserProfile({
6  user,
7  onEdit,
8}: {
9  user: { name: string; age: number };
10  onEdit: () => void;
11}) {
12  console.log('UserProfile render'); // S'affiche a CHAQUE render du parent !
13  return (
14    <div>
15      <h3>{user.name}, {user.age} ans</h3>
16      <button onClick={onEdit}>Modifier</button>
17    </div>
18  );
19});
20
21function App() {
22  const [count, setCount] = useState(0);
23
24  return (
25    <div>
26      <button onClick={() => setCount(c => c + 1)}>
27        Compteur : {count}
28      </button>
29
30      <UserProfile
31        // PROBLEME 1 : objet literal = nouvelle reference a chaque render
32        // { name: 'Alice', age: 30 } !== { name: 'Alice', age: 30 }
33        // car ce sont deux objets differents en memoire
34        user={{ name: 'Alice', age: 30 }}
35
36        // PROBLEME 2 : fonction inline = nouvelle reference a chaque render
37        // () => {} !== () => {}
38        // car ce sont deux fonctions differentes en memoire
39        onEdit={() => console.log('edit')}
40      />
41      {/* memo compare les props par reference (===)
42          Objet precedent !== Nouvel objet -> re-render
43          Fonction precedente !== Nouvelle fonction -> re-render
44          Resultat : memo est completement inutile ici */}
45    </div>
46  );
47}

1// Comparateur personnalise : controle fin sur la comparaison
2
3import { memo } from 'react';
4
5interface DataGridProps {
6  data: Array<{ id: string; value: number; label: string }>;
7  columns: string[];
8  onRowClick: (id: string) => void;
9  lastUpdated: Date;
10}
11
12// areEqual retourne true = PAS de re-render
13// areEqual retourne false = re-render
14function areEqual(prevProps: DataGridProps, nextProps: DataGridProps): boolean {
15  // Comparer la longueur et les IDs des donnees (pas la reference)
16  if (prevProps.data.length !== nextProps.data.length) return false;
17
18  // Verifier si les donnees ont reellement change (deep comparison ciblee)
19  const dataChanged = prevProps.data.some((item, index) => {
20    const next = nextProps.data[index];
21    return item.id !== next.id || item.value !== next.value;
22  });
23  if (dataChanged) return false;
24
25  // Les colonnes changent rarement, comparer par longueur + contenu
26  if (prevProps.columns.length !== nextProps.columns.length) return false;
27  if (prevProps.columns.some((col, i) => col !== nextProps.columns[i])) return false;
28
29  // Ignorer onRowClick (sera stabilise par useCallback dans le parent)
30  // Ignorer lastUpdated si la difference est < 1 seconde
31  const timeDiff = Math.abs(
32    nextProps.lastUpdated.getTime() - prevProps.lastUpdated.getTime()
33  );
34  if (timeDiff > 1000) return false;
35
36  return true; // Props considerees identiques, pas de re-render
37}
38
39const DataGrid = memo(function DataGrid({
40  data,
41  columns,
42  onRowClick,
43  lastUpdated,
44}: DataGridProps) {
45  console.log('DataGrid render -', data.length, 'lignes');
46
47  return (
48    <table>
49      <thead>
50        <tr>
51          {columns.map(col => <th key={col}>{col}</th>)}
52        </tr>
53      </thead>
54      <tbody>
55        {data.map(row => (
56          <tr key={row.id} onClick={() => onRowClick(row.id)}>
57            <td>{row.label}</td>
58            <td>{row.value}</td>
59          </tr>
60        ))}
61      </tbody>
62    </table>
63  );
64}, areEqual); // <-- second argument : la fonction de comparaison
65
66export default DataGrid;

1// Cas d'usage 1 : memoiser un calcul couteux
2
3import { useMemo, useState } from 'react';
4
5interface Product {
6  id: string;
7  name: string;
8  price: number;
9  category: string;
10  rating: number;
11  inStock: boolean;
12}
13
14function ProductCatalog({ products }: { products: Product[] }) {
15  const [search, setSearch] = useState('');
16  const [sortBy, setSortBy] = useState<'price' | 'rating'>('price');
17  const [showInStockOnly, setShowInStockOnly] = useState(false);
18
19  // Sans useMemo : ce calcul s'execute a CHAQUE render
20  // Avec 10 000 produits, c'est ~50ms a chaque frappe clavier
21  const filteredAndSorted = useMemo(() => {
22    console.log('Recalcul de la liste filtree...');
23
24    // Etape 1 : Filtrer par recherche
25    let result = products.filter(p =>
26      p.name.toLowerCase().includes(search.toLowerCase())
27    );
28
29    // Etape 2 : Filtrer par stock
30    if (showInStockOnly) {
31      result = result.filter(p => p.inStock);
32    }
33
34    // Etape 3 : Trier
35    result.sort((a, b) => {
36      if (sortBy === 'price') return a.price - b.price;
37      return b.rating - a.rating;
38    });
39
40    // Etape 4 : Formater les prix (couteux avec Intl)
41    return result.map(p => ({
42      ...p,
43      displayPrice: new Intl.NumberFormat('fr-FR', {
44        style: 'currency',
45        currency: 'EUR',
46      }).format(p.price),
47    }));
48  }, [products, search, sortBy, showInStockOnly]);
49  // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
50  // Le calcul ne se relance QUE si l'une de ces 4 valeurs change.
51  // Si un autre state du composant change (ex: un modal ouvert),
52  // useMemo retourne le resultat en cache.
53
54  return (
55    <div>
56      <input
57        value={search}
58        onChange={e => setSearch(e.target.value)}
59        placeholder="Rechercher..."
60      />
61      <select
62        value={sortBy}
63        onChange={e => setSortBy(e.target.value as 'price' | 'rating')}
64      >
65        <option value="price">Prix</option>
66        <option value="rating">Note</option>
67      </select>
68      <label>
69        <input
70          type="checkbox"
71          checked={showInStockOnly}
72          onChange={e => setShowInStockOnly(e.target.checked)}
73        />
74        En stock uniquement
75      </label>
76
77      <p>{filteredAndSorted.length} resultats</p>
78      <ul>
79        {filteredAndSorted.map(p => (
80          <li key={p.id}>{p.name} - {p.displayPrice}</li>
81        ))}
82      </ul>
83    </div>
84  );
85}

1// Le piege de la reference : sans useMemo, React.memo est inutile
2
3import { memo, useMemo, useState } from 'react';
4
5// Composant enfant memoize
6const ChartConfig = memo(function ChartConfig({
7  config,
8}: {
9  config: { theme: string; animate: boolean; gridLines: number };
10}) {
11  console.log('ChartConfig render');
12  return (
13    <div>
14      Theme: {config.theme}, Grille: {config.gridLines} lignes
15    </div>
16  );
17});
18
19// PROBLEME : sans useMemo
20function DashboardBroken() {
21  const [refreshCount, setRefreshCount] = useState(0);
22
23  // Cet objet est recree a CHAQUE render = nouvelle reference
24  // { theme: 'dark', ... } !== { theme: 'dark', ... } par reference
25  const config = { theme: 'dark', animate: true, gridLines: 5 };
26
27  return (
28    <div>
29      <button onClick={() => setRefreshCount(r => r + 1)}>
30        Rafraichir ({refreshCount})
31      </button>
32      {/* memo est contourne : config est une nouvelle reference */}
33      <ChartConfig config={config} />
34    </div>
35  );
36}
37
38// SOLUTION : avec useMemo
39function DashboardFixed() {
40  const [refreshCount, setRefreshCount] = useState(0);
41
42  // useMemo retourne la MEME reference tant que les deps ne changent pas
43  const config = useMemo(
44    () => ({ theme: 'dark', animate: true, gridLines: 5 }),
45    [] // Pas de dependances = reference stable pour toute la vie du composant
46  );
47
48  return (
49    <div>
50      <button onClick={() => setRefreshCount(r => r + 1)}>
51        Rafraichir ({refreshCount})
52      </button>
53      {/* memo fonctionne : config est la meme reference */}
54      <ChartConfig config={config} />
55    </div>
56  );
57}

1// Exemple complet : liste de 10 000 elements avec filtre memoize
2
3import { memo, useMemo, useState } from 'react';
4
5interface Employee {
6  id: string;
7  name: string;
8  department: string;
9  salary: number;
10  hireDate: string;
11}
12
13// Composant ligne memoize (ne re-rend que si l'employe change)
14const EmployeeRow = memo(function EmployeeRow({
15  employee,
16  isSelected,
17  onSelect,
18}: {
19  employee: Employee;
20  isSelected: boolean;
21  onSelect: (id: string) => void;
22}) {
23  console.log('EmployeeRow render:', employee.name);
24  return (
25    <tr
26      className={isSelected ? 'bg-blue-50' : ''}
27      onClick={() => onSelect(employee.id)}
28    >
29      <td>{employee.name}</td>
30      <td>{employee.department}</td>
31      <td>
32        {new Intl.NumberFormat('fr-FR', {
33          style: 'currency',
34          currency: 'EUR',
35        }).format(employee.salary)}
36      </td>
37      <td>{new Date(employee.hireDate).toLocaleDateString('fr-FR')}</td>
38    </tr>
39  );
40});
41
42function EmployeeDirectory({ employees }: { employees: Employee[] }) {
43  const [filter, setFilter] = useState('');
44  const [selectedId, setSelectedId] = useState<string | null>(null);
45  const [sortField, setSortField] = useState<'name' | 'salary'>('name');
46
47  // useMemo : le filtre + tri ne se recalcule que lorsque
48  // employees, filter ou sortField changent.
49  // Cliquer sur une ligne (selectedId change) ne relance PAS le calcul.
50  const visibleEmployees = useMemo(() => {
51    console.log('Recalcul de visibleEmployees...');
52
53    const filtered = employees.filter(emp =>
54      emp.name.toLowerCase().includes(filter.toLowerCase()) ||
55      emp.department.toLowerCase().includes(filter.toLowerCase())
56    );
57
58    return filtered.sort((a, b) => {
59      if (sortField === 'name') return a.name.localeCompare(b.name);
60      return b.salary - a.salary;
61    });
62  }, [employees, filter, sortField]);
63  // selectedId n'est PAS dans les deps -> cliquer ne recalcule pas
64
65  return (
66    <div>
67      <input
68        value={filter}
69        onChange={e => setFilter(e.target.value)}
70        placeholder="Filtrer par nom ou departement..."
71      />
72      <p>{visibleEmployees.length} employes affiches sur {employees.length}</p>
73      <table>
74        <thead>
75          <tr>
76            <th onClick={() => setSortField('name')}>Nom</th>
77            <th>Departement</th>
78            <th onClick={() => setSortField('salary')}>Salaire</th>
79            <th>Embauche</th>
80          </tr>
81        </thead>
82        <tbody>
83          {visibleEmployees.map(emp => (
84            <EmployeeRow
85              key={emp.id}
86              employee={emp}
87              isSelected={emp.id === selectedId}
88              onSelect={setSelectedId}
89            />
90          ))}
91        </tbody>
92      </table>
93    </div>
94  );
95}

1// Syntaxe de base : useCallback
2
3import { useCallback, useState } from 'react';
4
5function TodoApp() {
6  const [todos, setTodos] = useState<Todo[]>([]);
7  const [inputValue, setInputValue] = useState('');
8
9  // Sans useCallback : cette fonction est recreee a chaque render
10  // const handleAddTodo = () => { ... };
11
12  // Avec useCallback : la meme reference est reutilisee
13  // tant que les dependances ne changent pas
14  const handleAddTodo = useCallback(() => {
15    if (!inputValue.trim()) return;
16
17    setTodos(prev => [
18      ...prev,
19      { id: crypto.randomUUID(), text: inputValue, done: false },
20    ]);
21    setInputValue('');
22  }, [inputValue]);
23  // ^^^^^^^^^ Depend de inputValue car on le lit dans le callback.
24  // Quand inputValue change, la fonction est recreee avec la nouvelle valeur.
25
26  const handleToggle = useCallback((id: string) => {
27    setTodos(prev =>
28      prev.map(todo =>
29        todo.id === id ? { ...todo, done: !todo.done } : todo
30      )
31    );
32  }, []);
33  // ^^ Pas de dependance : on utilise la forme fonctionnelle de setState
34  // donc on n'a pas besoin de lire "todos" directement.
35  // Cette reference reste stable pour TOUTE la vie du composant.
36
37  const handleDelete = useCallback((id: string) => {
38    setTodos(prev => prev.filter(todo => todo.id !== id));
39  }, []);
40
41  return (
42    <div>
43      <input value={inputValue} onChange={e => setInputValue(e.target.value)} />
44      <button onClick={handleAddTodo}>Ajouter</button>
45      <TodoList
46        todos={todos}
47        onToggle={handleToggle}
48        onDelete={handleDelete}
49      />
50    </div>
51  );
52}

1// Equivalence useCallback / useMemo
2
3import { useCallback, useMemo } from 'react';
4
5function SearchForm({ onSearch }: { onSearch: (query: string) => void }) {
6  const [query, setQuery] = useState('');
7
8  // Ces deux lignes sont STRICTEMENT equivalentes :
9
10  // Version useCallback (syntaxe dediee, plus lisible)
11  const handleSearch = useCallback(
12    () => onSearch(query),
13    [onSearch, query]
14  );
15
16  // Version useMemo (generique, meme resultat)
17  const handleSearchAlt = useMemo(
18    () => () => onSearch(query), // useMemo retourne la fonction
19    [onSearch, query]
20  );
21
22  // handleSearch === handleSearchAlt (meme comportement)
23  // Preferez useCallback pour les fonctions : plus explicite et lisible.
24
25  return (
26    <div>
27      <input value={query} onChange={e => setQuery(e.target.value)} />
28      <button onClick={handleSearch}>Rechercher</button>
29    </div>
30  );
31}

1// ANTI-PATTERN : useCallback sans React.memo
2
3import { useCallback, useState } from 'react';
4
5function ParentBroken() {
6  const [count, setCount] = useState(0);
7
8  // useCallback stabilise la reference de handleClick...
9  const handleClick = useCallback(() => {
10    console.log('clicked');
11  }, []);
12
13  return (
14    <div>
15      <button onClick={() => setCount(c => c + 1)}>
16        Compteur : {count}
17      </button>
18
19      {/* MAIS ChildComponent n'est PAS memoize !
20          Il se re-rend a chaque changement de count,
21          que handleClick soit stable ou non.
22          useCallback ne fait rien d'utile ici. */}
23      <ChildComponent onClick={handleClick} />
24    </div>
25  );
26}
27
28// ChildComponent se re-rend a chaque render du parent
29// car il n'est pas enveloppe par React.memo
30function ChildComponent({ onClick }: { onClick: () => void }) {
31  console.log('ChildComponent render'); // Toujours affiche
32  return <button onClick={onClick}>Action</button>;
33}
34
35// -----------------------------------------------
36
37// PATTERN CORRECT : useCallback + React.memo
38
39import { memo } from 'react';
40
41function ParentFixed() {
42  const [count, setCount] = useState(0);
43
44  const handleClick = useCallback(() => {
45    console.log('clicked');
46  }, []);
47
48  return (
49    <div>
50      <button onClick={() => setCount(c => c + 1)}>
51        Compteur : {count}
52      </button>
53
54      {/* MemoizedChild est enveloppe par memo,
55          et handleClick est une reference stable.
56          MemoizedChild ne se re-rend PAS quand count change. */}
57      <MemoizedChild onClick={handleClick} />
58    </div>
59  );
60}
61
62const MemoizedChild = memo(function MemoizedChild({
63  onClick,
64}: {
65  onClick: () => void;
66}) {
67  console.log('MemoizedChild render'); // Seulement au mount
68  return <button onClick={onClick}>Action</button>;
69});