Gestionnaires d’événements

• Assurez-vous que les écouteurs d’événements enregistrés dans des callbacks useEffect définissent correctement leur logique de nettoyage. Lorsqu’un effet ajoute un écouteur, il doit retourner une fonction de nettoyage qui supprime cet écouteur. Par exemple, faites ceci :

  useEffect(() => {
    const handleClick = () => {
      // ... gérer l'événement de clic
    };
   
    document.addEventListener("click", handleClick);
   
    return () => {
      document.removeEventListener("click", handleClick);
    };
  }, []);

  Au lieu de ceci :

  useEffect(() => {
    const handleClick = () => {
      // ... gérer l'événement de clic
    };
   
    document.addEventListener("click", handleClick);
   
    // Nettoyage incorrect : S'exécute immédiatement, pas lorsque le composant est démonté
    document.removeEventListener("click", handleClick);
  }, []);

  Ceci est important car un nettoyage incorrect peut conduire à des fuites mémoire et à un comportement inattendu.

• Les props de gestionnaires d’événements doivent être préfixées avec on et utiliser camelCase :

  // Bon
  <button onClick={handleClick} onMouseEnter={handleMouseEnter}>
   
  // Évitez
  <button clickHandler={handleClick} mouseenter={handleMouseEnter}>

• Les fonctions de gestion elles-mêmes doivent utiliser le préfixe handle :

  // Bon
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { ... }
  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => { ... }
   
  // Évitez
  const submit = (event: React.FormEvent<HTMLFormElement>) => { ... }
  const inputChanged = (event: React.ChangeEvent<HTMLInputElement>) => { ... }

• Soyez explicite avec les paramètres d’événement :

  // Bon
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { ... }
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => { ... }
   
  // Évitez
  const handleChange = (e) => { ... }
  const handleClick = (x) => { ... }

• Tapez correctement vos gestionnaires d’événements :

  type ButtonProps = {
    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
    children: React.ReactNode;
  };
   
  const Button = ({ onClick, children }: ButtonProps) => (
    <button onClick={onClick}>{children}</button>
  );