Composant réactif

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.