// Le Virtual DOM n'est qu'une représentation en mémoire : un arbre d'objets JS légers
// { type: "button", props: { onClick, children: "Envoyer" } }
// React compare (diff) le nouvel arbre au précédent -- c'est la RÉCONCILIATION

// Règle n°1 du diffing : deux éléments de TYPE différent produisent des arbres différents
function Exemple({ chargement }) {
    // si "chargement" change, React DÉMONTE <Spinner> et MONTE <Contenu> --
    // aucun état interne n'est conservé entre les deux (types différents)
    return chargement ? <Spinner /> : <Contenu />;
}

// Règle n°2 : même type au même endroit -> React RÉUTILISE le noeud DOM et met juste à jour les props
function Compteur({ valeur }) {
    // re-rendu avec une nouvelle "valeur" : le même <p> DOM est conservé,
    // seul son textContent est mis à jour -- pas de démontage/remontage
    return <p>{valeur}</p>;
}

// Fiber : depuis React 16, l'arbre de réconciliation n'est plus une simple récursion synchrone,
// mais une structure de données (linked list de "fibers") permettant de DÉCOUPER le travail
// en unités interruptibles -- base du rendu concurrent (Concurrent Mode / React 18+)

// Chaque Fiber contient : le type, les props, un pointeur vers l'enfant/le frère/le parent,
// et le travail "en attente" -- ce qui permet à React de mettre en pause le rendu,
// laisser le navigateur traiter un événement urgent (frappe clavier), puis reprendre

// startTransition : signale explicitement un rendu comme NON urgent,
// interruptible par une interaction plus prioritaire
import { startTransition, useState } from "react";

function Recherche() {
    const [terme, setTerme] = useState("");
    const [resultats, setResultats] = useState([]);

    function gererChangement(e) {
        setTerme(e.target.value); // urgent : le texte tapé doit s'afficher immédiatement

        startTransition(() => {
            // non urgent : le calcul/rendu des résultats peut être interrompu
            // si l'utilisateur tape encore avant qu'il ne se termine
            setResultats(filtrerResultatsLourds(e.target.value));
        });
    }

    return <input value={terme} onChange={gererChangement} />;
}

// Batching automatique (React 18+) : TOUS les setState d'un même "tick" sont regroupés
// en UN SEUL re-rendu, même dans un setTimeout, une Promise ou un handler natif
// (avant React 18, seul le batching dans les handlers React était automatique)
function Composant() {
    function gererClic() {
        setTimeout(() => {
            setA(1); // avant React 18 : 2 rendus séparés dans un setTimeout
            setB(2); // depuis React 18 : 1 SEUL rendu, les deux mises à jour sont fusionnées
        }, 0);
    }
}

// Hydration : côté SSR, le serveur envoie du HTML déjà rendu -- React doit ensuite
// "réattacher" son arbre de fibers à CE DOM existant, sans tout re-créer
import { hydrateRoot } from "react-dom/client";

hydrateRoot(document.getElementById("root"), <App />);
// hydrateRoot RÉUTILISE le DOM existant et y attache les event listeners --
// contrairement à createRoot qui construirait le DOM depuis zéro

// Piège classique : mismatch d'hydration -- le HTML serveur ne correspond pas
// à ce que le rendu client produirait
function Horodatage() {
    return <p>{new Date().toLocaleTimeString()}</p>;
    // le serveur rend une heure, le client une autre (quelques ms/s plus tard) -> WARNING de mismatch
}
// correction : rendre la valeur dynamique APRÈS le montage, via useEffect
function HorodatageCorrige() {
    const [heure, setHeure] = useState(null);
    useEffect(() => setHeure(new Date().toLocaleTimeString()), []);
    return <p>{heure ?? "--:--:--"}</p>; // le serveur ET le premier rendu client affichent la même chose
}

// Selective hydration (React 18+) : plusieurs <Suspense> peuvent s'hydrater INDÉPENDAMMENT
// et dans le désordre -- React priorise l'hydration de la zone avec laquelle l'utilisateur interagit
function Page() {
    return (
        <>
            <Suspense fallback={<SqueletteEntete />}>
                <Entete />
            </Suspense>
            <Suspense fallback={<SqueletteCommentaires />}>
                <Commentaires /> {/* si l'utilisateur clique ici pendant l'hydration de l'Entête,
                                     React interrompt et priorise CETTE zone */}
            </Suspense>
        </>
    );
}