Super Pokemon Rumble

Explication du comportement de la mise en veille

Dans cet exemple, le comportement de la mise en veille est contrôlé par l'état isSleeping.

Lorsque l'utilisateur clique sur le bouton "Dormir", l'état isSleeping passe à true. Ceci déclenche un effet secondaire qui met à jour le titre de la page et affiche un message de confirmation.

Lorsque l'utilisateur clique sur le bouton "Réveiller", l'état isSleeping repasse à false, et le titre de la page revient à sa valeur initiale.

Code de l'exemple

Voici le composant React utilisé pour cet exemple :

import { useState, useEffect } from "react";

export default function SleepingComponent() {
  const [isSleeping, setIsSleeping] = useState(false);

  useEffect(() => {
    if (isSleeping) {
      document.title = "Zzz... Je dors...";
      console.log("Le composant est maintenant en veille.");
    } else {
      document.title = "Réveillé et prêt !";
      console.log("Le composant est réveillé.");
    }
  }, [isSleeping]);

  return (
    

      
Contrôle de la Veille
      
Statut actuel : {isSleeping ? (
        En Veille
      ) : (
        Actif
      )}

       setIsSleeping(true)} disabled={isSleeping}>
        Dormir
      
       
       setIsSleeping(false)} disabled={!isSleeping}>
        Réveiller
      
    
  );
}

Points clés observés

• L'effet s'exécute à chaque changement de isSleeping.
• Lorsque isSleeping est true, le titre change et un message est logué.
• L'utilisation de la dépendance [isSleeping] assure que l'effet se réexécute uniquement quand cette valeur change.

Dans un contexte réel, vous utiliseriez probablement useEffect pour gérer des opérations plus complexes comme des abonnements réseau ou des timers, qui doivent être nettoyés.