Events

Gérer l'interaction utilisateur (clics, frappes, survols)

Le concept : L'interactivité est au cœur d'une application React. Dans React, la gestion des événements se rapproche énormément de la gestion standard du DOM (comme onclick), mais avec des noms en camelCase (onClick). Sous la surface, React intercepte tous ces événements via un système performant appelé SyntheticEvent, garantissant un comportement identique sur tous les navigateurs.

💡 Synthetic Events

React n'utilise pas directement les événements natifs du navigateur. Il utilise une couche d'abstraction appelée SyntheticEvent.

Cela garantit que votre gestion des événements fonctionne de manière identique sur tous les navigateurs (IE, Chrome, Firefox). Pour vous, c'est transparent, vous utilisez e.preventDefault() comme d'habitude.

Synthetic Events

// CamelCase obligatoire (onClick, pas onclick)
function Button() {
    const handleClick = (e) => {
        e.preventDefault();
        alert("Click!");
    };

    return (
        <a href="#" onClick={ handleClick }>
            Clique-moi
        </a>
    );
}

Passer des arguments

// ❌ Incorrect (Exécuté immédiatement au rendu)
<button onClick={ delete(id) }>Supprimer</button>

// ✅ Correct (Arrow Function Wrapper)
<button onClick={ () => delete(id) }>Supprimer</button>

Propagation (Bubbling)

// Arrêter la propagation vers les parents
const onClick = (e) => {
    e.stopPropagation();
    activate();
};

⚡ Performance

Utiliser des fonctions fléchées en ligne onClick={() => ...} crée une nouvelle fonction à chaque rendu.

Généralement négligeable, mais à éviter dans les grosses listes ou directives de performance (utilisez useCallback).

Démo Events

En attente...

🫧 Analogie : Les Bulles (Bubbling)

Quand vous cliquez sur un bouton, l'événement naît sur le bouton, puis remonte (comme une bulle d'air) vers le parent, puis le grand-parent, jusqu'à window.

C'est pour ça qu'un onClick sur une div parent capture aussi les clics de ses enfants !

Advanced : Delegation (Interne)

// React n'attache pas 1000 listeners !
// Il attache UN SEUL listener sur la racine (root).
// Quand vous cliquez, React regarde la cible et appelle votre fonction.
// => Gain de mémoire énorme.

Pattern : Debouncing (Performance)

// Éviter d'appeler une API à chaque frappe de clavier
function Search() {
    const handleChange = (e) => {
        // On efface le timer précédent
        clearTimeout(window.timer);
        
        // On attend 500ms avant de valider
        window.timer = setTimeout(() => {
            fetchResults(e.target.value);
        }, 500);
    };
    
    return <input onChange={ handleChange } />;
}

← Effect Suivant : Lists →