Définition : La simplicité d'une fonction JavaScript

Au coeur de l'approche moderne de React se trouvent les composants fonctionnels (Function Components). Comme leur nom l'indique, ce sont tout simplement des fonctions JavaScript standard. Leur rôle est de recevoir des données en entrée (appelées props, que nous verrons au chapitre suivant) et de retourner une description de ce qui doit être affiché à l'écran, généralement sous forme de JSX.

Cette approche est appréciée pour sa concision et sa lisibilité. Si vous savez écrire une fonction en JavaScript, vous savez déjà écrire la structure de base d'un composant fonctionnel React. Cette simplicité fondamentale a grandement contribué à leur adoption massive.

Syntaxe et exemple de base

Vous pouvez définir un composant fonctionnel en utilisant soit la syntaxe de déclaration de fonction classique (`function MaFonction() {}`), soit, plus couramment aujourd'hui, la syntaxe des fonctions fléchées ES6 (`const MaFonction = () => {}`). Les deux sont valides et fonctionnent de manière identique en tant que composants React.

Voici un exemple très simple d'un composant fonctionnel qui affiche un message de bienvenue :

// Utilisation d'une fonction fléchée (le plus courant)
const MessageBienvenue = () => {
  // La fonction retourne du JSX
  return 
Bienvenue sur notre application React !
;
};

// Utilisation d'une déclaration de fonction classique
function AutreMessage() {
  const nomUtilisateur = "Utilisateur Anonyme";
  return 
Connecté en tant que {nomUtilisateur}.
;
}

// Comment utiliser ces composants (aperçu) :
function App() {
  return (
    

      
      
    
  );
}

export default App; // Rendre le composant App exportable

Notez que le nom du composant (la fonction) doit commencer par une lettre majuscule (par exemple, `MessageBienvenue`). C'est une convention cruciale qui permet à React de distinguer les composants personnalisés des balises HTML natives (qui sont en minuscules, comme `div` ou `h1`). La fonction retourne ensuite l'élément JSX qui représente l'interface utilisateur de ce composant.

Pourquoi privilégier les composants fonctionnels ?

Si les composants classe ont longtemps été la seule manière de créer des composants avec état ou cycle de vie, l'introduction des Hooks dans React 16.8 a complètement changé la donne. Les Hooks permettent aux composants fonctionnels d'accéder à des fonctionnalités auparavant réservées aux classes, comme la gestion de l'état local (`useState`) et les effets de bord (`useEffect`), mais avec une syntaxe plus simple et plus directe.

Les avantages des composants fonctionnels sont nombreux :

• Plus concis et lisibles : Ils nécessitent généralement moins de code répétitif (boilerplate) que les composants classe (pas de `constructor`, pas de `render`, pas de `this`).
• Plus faciles à raisonner : La logique est souvent plus simple à suivre, car elle n'est pas dispersée dans différentes méthodes de cycle de vie.
• Plus faciles à tester : Etant de simples fonctions, ils sont intrinsèquement plus aisés à tester unitairement.
• Potentiellement plus performants : Dans certains scénarios, React peut optimiser plus facilement les composants fonctionnels.
• Meilleure intégration avec les Hooks : Les Hooks sont conçus spécifiquement pour être utilisés dans les composants fonctionnels, rendant la gestion de l'état et des effets plus élégante et réutilisable.

Pour toutes ces raisons, les composants fonctionnels sont aujourd'hui considérés comme l'approche standard et recommandée pour écrire des composants React, que ce soit pour de nouveaux projets ou lors de la refactorisation de code existant.

De 'stateless' à 'stateful' grâce aux Hooks

Initialement, les composants fonctionnels étaient souvent appelés "composants stateless" ou "composants de présentation" car ils ne pouvaient pas gérer leur propre état interne ni accéder au cycle de vie complexe des composants. Ils se contentaient de recevoir des props et de rendre une UI.

Avec l'arrivée des Hooks, cette limitation a disparu. Des Hooks comme `useState`, `useEffect`, `useContext`, etc., permettent aux composants fonctionnels de gérer l'état, d'exécuter des effets de bord après le rendu, de consommer des contextes, et bien plus encore. Ils sont désormais tout aussi puissants, sinon plus flexibles, que les composants classe. Nous explorerons les Hooks en profondeur dans la Partie 2 de ce guide.

Adopter l'approche moderne

En conclusion, les composants fonctionnels représentent la manière moderne, simple et puissante de construire des interfaces utilisateur avec React. Leur syntaxe épurée, combinée à la flexibilité offerte par les Hooks, en fait le choix privilégié pour la majorité des cas d'utilisation. En vous familiarisant avec leur écriture et leur fonctionnement, vous adoptez les meilleures pratiques actuelles de l'écosystème React.