# Composant réactif

> Élément d'interface qui se met à jour automatiquement dès qu'une donnée dont il dépend change, sans qu'un développeur n'écrive explicitement le code de rafraîchissement de l'affichage.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/composant-reactif/

Dans une page web écrite « à la main », changer une donnée n'affecte jamais l'écran tout seul : il faut explicitement réécrire le fragment de HTML concerné en JavaScript. Un composant réactif inverse cette logique : on décrit l'affichage en fonction d'une donnée (un état), et dès que cette donnée change, le rafraîchissement de la portion d'écran concernée se déclenche automatiquement, sans code de mise à jour à écrire soi-même.

## Composants réactifs dans WordPress

L'éditeur de blocs de WordPress est lui-même construit en React, une bibliothèque de composants réactifs : chaque panneau de réglages, chaque bloc affiché dans la zone d'édition, se met à jour dès qu'un état interne change, par exemple via le hook `useState`. Sur le front d'un site, l'API Interactivité (Interactivity API), introduite plus récemment, apporte une réactivité comparable directement dans le HTML généré, sans imposer React côté visiteur.

## Exemple

```
function CompteurLikes() {
  const [ nombre, setNombre ] = wp.element.useState( 0 );
  return wp.element.createElement(
    'button', { onClick: () => setNombre( nombre + 1 ) }, nombre
  );
}
```

## Bon à savoir

- La réactivité a un coût de calcul : un composant mal conçu qui se remet à jour trop souvent ou sur des données non pertinentes peut ralentir une interface plutôt que la fluidifier.
- Tous les frameworks n'implémentent pas la réactivité de la même façon : React recalcule et compare un arbre virtuel, d'autres approches suivent chaque donnée individuellement de façon plus fine.
- Un composant réactif reste indépendant du stockage des données en base : la réactivité concerne l'affichage à l'écran, pas la persistance dans `wp_options` ou une table personnalisée.