Composants Fonctionnels dans React — La Norme Moderne de Développement

Qu'est-ce qu'un Functional Component ?

Functional Component est un composant React défini comme une fonction qui accepte un objet props et retourne un élément React. Avant React 16.8, ces composants étaient appelés stateless car ils ne pouvaient pas gérer d'état interne.

Avec l'introduction des hooks dans React 16.8 (février 2019), les composants fonctionnels ont obtenu l'accès à l'état (useState), aux effets secondaires (useEffect), au contexte (useContext) et aux refs (useRef). Le terme « stateless » est obsolète — les composants fonctionnels modernes gèrent entièrement l'état.

React recommande officiellement les composants fonctionnels comme moyen principal de créer des composants. Toute la documentation sur react.dev, les exemples, les tutoriels et les nouvelles API (Server Components, Actions) sont construits sur l'approche fonctionnelle. Les composants de classe n'ont pas été supprimés, mais les nouvelles fonctionnalités de React ne sont disponibles que via les hooks.

Création d'un Composant Fonctionnel

Le composant fonctionnel le plus simple est une fonction qui retourne du JSX. Il accepte les props comme argument, ne nécessite ni constructeur, ni appel super, ni liaison this. Les props sont accessibles directement via l'argument de la fonction — pas de this.props.

// Functional component without state
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Arrow function (common variant)
const Greeting = ({ name }) => (
  <h1>Hello, {name}!</h1>
);

Composant avec État

Pour ajouter un état, utilisez useState. Le hook retourne un tuple de deux valeurs : l'état actuel et une fonction setter. Contrairement au this.setState basé sur les classes, useState remplace la valeur entièrement plutôt que de la fusionner avec la précédente.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Hooks dans les Composants Fonctionnels

Les hooks sont le fondement de React moderne. Chaque hook résout une tâche spécifique : useState — état, useEffect — effets secondaires, useContext — accès au contexte, useRef — références aux éléments DOM, useCallback et useMemo — mémorisation.

useEffect pour les Effets Secondaires

useEffect remplace componentDidMount, componentDidUpdate et componentWillUnmount à la fois. Le premier argument est un callback avec l'effet, le second est un tableau de dépendances. Si le tableau est vide, l'effet s'exécute une fois après le montage. Si des dépendances sont spécifiées, il s'exécute à chaque modification de l'une d'elles.

import React, { useState, useEffect } from 'react';

function UserData({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let cancelled = false;

    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        if (!cancelled) setUser(data);
      });

    // Cleanup - analog of componentWillUnmount
    return () => { cancelled = true; };
  }, [userId]); // Dependency

  return <div>{user?.name}</div>;
}

Hooks Personnalisés

Le principal avantage des composants fonctionnels est la réutilisation de logique via des hooks personnalisés. Alors que dans un composant de classe, la logique était dupliquée entre componentDidMount et componentDidUpdate, dans un composant fonctionnel, elle est extraite dans une fonction séparée avec le préfixe use. Les hooks personnalisés sont l'alternative principale aux HOC et render props.

Composition plutôt qu'Héritage

React recommande la composition plutôt que l'héritage pour la réutilisation de code entre composants. Les composants fonctionnels sont idéaux pour la composition : un composant peut en contenir plusieurs autres, en leur passant des props et des children.

Le motif children — lorsqu'un composant reçoit des éléments enfants via la prop children — est implémenté naturellement : function Layout({ children }). L'analogue des slots de Vue est implémenté via des props de composants nommés : function Page({ header, sidebar, content }).

L'héritage est rarement utilisé dans React. Même les composants de classe, qui supportent techniquement extends, forment rarement des hiérarchies plus profondes qu'un niveau. Les composants fonctionnels avec composition couvrent entièrement les besoins de réutilisation de code sans héritage.

Optimisation des Performances

Les composants fonctionnels sont dotés de mécanismes d'optimisation intégrés. React.memo — l'équivalent de PureComponent pour les fonctions : empêche le re-rendu si les props n'ont pas changé (comparaison superficielle). useMemo met en cache les résultats de calcul entre les rendus.

import React, { useMemo } from 'react';

// React.memo - memoize component
const ExpensiveList = React.memo(({ items }) => {
  return <ul>
    {items.map(item =>
      <li key={item.id}>{item.name}</li>
    )}
  </ul>;
});

// useMemo - caching result
function Dashboard({ transactions }) {
  const summary = useMemo(() => {
    return transactions.reduce((acc, t) => acc + t.amount, 0);
  }, [transactions]);

  return <p>Total: {summary}</p>;
}

useCallback mémorise les fonctions callback afin qu'elles ne soient pas recréées à chaque rendu. C'est crucial lors du passage de fonctions à des composants enfants enveloppés dans React.memo : sans useCallback, le composant enfant sera re-rendu à chaque fois car la référence de la fonction change.

Composants Fonctionnels vs de Classe

La différence entre les approches va au-delà de la syntaxe. Les composants fonctionnels sont des fermetures : l'état et les effets sont liés à un rendu spécifique. Les composants de classe utilisent this : l'état est toujours extrait de this.state, qui peut être obsolète au moment de l'exécution d'un callback asynchrone.

Les composants fonctionnels offrent un flux d'exécution linéaire. Dans un composant de classe, la logique connexe est souvent dispersée sur plusieurs méthodes de cycle de vie. Par exemple, un abonnement WebSocket est configuré dans componentDidMount et supprimé dans componentWillUnmount. Dans un composant fonctionnel, les deux opérations sont dans un seul useEffect avec une fonction de nettoyage de retour.

TypeScript et Composants Fonctionnels

TypeScript fonctionne plus naturellement avec les composants fonctionnels qu'avec les classes. Typage des props — une interface pour l'argument de la fonction. Le type de retour est JSX.Element ou ReactNode. useState déduit automatiquement le type de la valeur initiale.

import React, { useState } from 'react';

interface ButtonProps {
  label: string;
  variant?: 'primary' | 'secondary';
  onClick: () => void;
}

const Button: React.FC<ButtonProps> =
  ({ label, variant = 'primary', onClick }) => (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {label}
    </button>
  );

TypeScript moderne permet de typer useReducer avec des types union discriminés, des génériques dans les hooks personnalisés et une validation stricte des enfants via React.PropsWithChildren. Les composants fonctionnels avec TypeScript offrent une sécurité de type complète sans abstractions supplémentaires.