Parlez des différences entre les composants contrôlés…

Les composants contrôlés gèrent leur état via useState (ou this.state dans les classes) et reçoivent des données et des fonctions de rappel via des props. L’état du formulaire, par exemple, est stocké dans l’état de React et mis à jour via des gestionnaires onChange.

Les composants non contrôlés stockent leur état à l’intérieur du DOM. Pour accéder à leur valeur, on utilise useRef (ou React.createRef dans les classes) pour obtenir une référence à l’élément DOM. La valeur des éléments du formulaire, par exemple, est extraite directement du DOM lors de la soumission.

Caractéristique	Composant contrôlé	Composant non contrôlé
Gestion de l’état	État React (`useState`)	DOM
Accès à la valeur	Via l’état et les props	Via Refs (`useRef`)
Mise à jour	Réactive, à chaque changement	Lors d’une action explicite (par ex., soumission)
Validation	Dans la logique React	Via l’API HTML standard ou manuellement après récupération de la valeur

Exemple de composant contrôlé :

import React, { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  }

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

Exemple de composant non contrôlé :

import React, { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef(null);

  const handleClick = () => {
    alert('Valeur de l’input : ' + inputRef.current.value);
  }

  return (
    <> 
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Obtenir la valeur</button>
    </>
  );
}

Le choix entre eux dépend de la complexité de la logique et de la nécessité d’une réaction instantanée aux changements d’entrée. Les composants contrôlés sont préférés pour les formulaires complexes et la validation en temps réel. Les non contrôlés conviennent pour les formulaires simples ou pour l’intégration avec des bibliothèques DOM tierces.

Parlez des différences entre les composants contrôlés et non contrôlés dans React.