Utilisation des Refs React et du hook useRef

React utilise une approche déclarative. Vous mettez à jour l'état (state), et React met à jour l'interface utilisateur (UI). Cela fonctionne pour la plupart des tâches.

Mais parfois, vous devez sortir du Virtual DOM. Vous pourriez avoir besoin de manipuler directement un véritable élément HTML. C'est là qu'interviennent les Refs et le hook useRef.

Qu'est-ce qu'une Ref ? Une Ref est un pointeur. Elle connecte React directement à un nœud DOM natif.

Pourquoi utiliser useRef au lieu de useState ? Les mises à jour de l'état (state) déclenchent un nouveau rendu (re-render). Cela signifie que React redessine le composant à l'écran. Les mises à jour de Ref ne déclenchent pas de nouveau rendu. Cela les rend parfaites pour les valeurs qui changent mais qui n'ont pas besoin d'apparaître immédiatement dans l'UI.

Cas d'utilisation courants : • Mettre automatiquement le focus sur un champ de saisie. • Contrôler des éléments vidéo ou audio (lecture/pause). • Mesurer la largeur ou la hauteur d'un élément. • Stocker des identifiants de minuteur pour les intervalles ou les délais (timeouts).

Comment utiliser useRef :

  1. Importer useRef depuis React.
  2. L'initialiser : const myRef = useRef(null).
  3. L'attacher à un élément : <input ref={myRef} />.
  4. Accéder à la valeur via : myRef.current.

Exemple 1 : Mise au focus automatique d'un champ de saisie Lorsqu'un utilisateur arrive sur une page, vous voulez que le curseur soit dans la zone de texte. Vous utilisez useEffect pour appeler myRef.current.focus() après le montage du composant.

Exemple 2 : Un chronomètre Si vous stockez l'ID d'un setInterval dans l'état (state), le composant est re-rendu à chaque tic du minuteur. C'est lent. Si vous stockez l'ID dans une ref, le composant reste rapide. La valeur est conservée entre les rendus sans imposer de travail supplémentaire au navigateur.

State vs Ref : • State : Déclenche un nouveau rendu. Utilisé pour les données de l'UI. Les mises à jour sont asynchrones. • Ref : Pas de nouveau rendu. Utilisé pour l'accès au DOM et la mémoire. Les mises à jour sont synchrones.

Conseils de pro pour les seniors : • Évitez l'usage excessif. N'utilisez les refs que lorsque la logique déclarative ne suffit plus. • Nettoyez la mémoire. Effacez toujours les intervalles ou les écouteurs d'événements (event listeners) dans votre fonction de nettoyage (cleanup function). • N'écrivez pas dans les refs pendant le rendu. Mettez à jour ref.current uniquement à l'intérieur de useEffect ou des gestionnaires d'événements (event handlers). Cela évite les effets de bord (side effects). • Utilisez forwardRef. Si vous souhaitez passer une ref à un composant enfant personnalisé, vous devez envelopper cet enfant dans React.forwardRef.

Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde