Refs React est une pratique essentielle pour gérer les références directes aux éléments du DOM dans vos composants React. Apprendre à maîtriser les Refs vous permettra d’améliorer la performance et la flexibilité de vos applications. Explorons comment les implémenter efficacement à travers des exemples concrets de code.

Introduction aux Refs React

Les Refs React permettent d’accéder directement aux éléments DOM ou aux instances de composants. Elles sont particulièrement utiles pour gérer des formulaires complexes, déclencher des animations ou intégrer des bibliothèques tiers qui manipulent directement le DOM. Pour plus d’informations sur les différences entre les single-page et multi-page applications avec React, consultez notre guide comparatif.

Créer des References en React

Pour commencer avec les Refs React, vous pouvez créer une Ref en utilisant l’API React.createRef() ou le hook useRef. Voici un exemple simple montrant comment créer et utiliser une Ref dans une fonction de composant :

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
    const inputEl = useRef(null);
    const onButtonClick = () => {
        // `current` pointe vers le champ texte monté
        inputEl.current.focus();
    };
    return (
        <>
            
            Focus the input
        
    );
}

Pour un guide plus approfondi sur l’utilisation des fonctions fléchées en JavaScript dans votre projet React, vous pouvez consulter notre article dédié.

Focus et Sélection des Inputs

Les Refs sont idéales pour gérer le focus des inputs dans une application. Par exemple, vous pouvez programmer une fonction qui met automatiquement le focus sur un champ de saisie lors de l’ouverture d’un modal :

import React, { useRef, useEffect } from 'react';

function ModalForm({ isOpen }) {
    const inputRef = useRef(null);

    useEffect(() => {
        if (isOpen) {
            inputRef.current.focus();
        }
    }, [isOpen]);

    return (
        

            
            Soumettre
        
    );
}

Utilisation Avancée des Refs

En plus de l’accès aux éléments DOM, les Refs React permettent également de conserver une valeur mutable qui ne déclenche pas le re-render du composant quand elle change. Cela peut être utile pour stocker des valeurs mises à jour par des écouteurs d’événements.

import React, { useRef, useState, useEffect } from 'react';

function TimerComponent() {
    const [count, setCount] = useState(0);
    const savedCallback = useRef();

    // Se souvenir du dernier rappel passé.
    useEffect(() => {
        savedCallback.current = () => setCount(count + 1);
    }, [count]);

    useEffect(() => {
        function tick() {
            savedCallback.current();
        }
        let intervalId = setInterval(tick, 1000);
        return () => clearInterval(intervalId);
    }, []); // ne se réexecute jamais

    return 
{count}
;
}

Pour aller plus loin et comprendre les différences entre les composants par classe et les fonctions, découvrez notre comparatif détaillé.

Interactions avec les Bibliothèques Tiers

Les Refs jouent un rôle crucial lorsque vos composants doivent interagir avec des bibliothèques tiers qui manipulent directement le DOM, comme D3.js. Vous pouvez ainsi garder le contrôle tout en permettant à la bibliothèque de manipuler la structure. Vous pouvez explorer l’intégration avec davantage de bibliothèques sur notre guide sur D3.js avec React.

import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

function D3Chart() {
    const ref = useRef();

    useEffect(() => {
        const svg = d3.select(ref.current);
        svg.append('circle')
           .attr('cx', 50)
           .attr('cy', 50)
           .attr('r', 40)
           .style('fill', 'blue');
    }, []);
    
    return ;
}

Pour une compréhension détaillée de l’utilisation du Context API avec les Refs, n’hésitez pas à visiter notre section guide sur le Context API React.

Conclusion

Les Refs React constituent une fonctionnalité puissante pour interagir directement avec le DOM ou stocker des références stables sans refaire le rendu. En tant que développeur, exploiter les Refs vous permet de peaufiner l’expérience utilisateur et d’améliorer la fluidité de vos applications. Pour explorer plus en détail, consultez notre cours complet sur React et découvrez des stratégies avancées de gestion des states et des side-effects. Vous pourriez aussi vouloir explorer des tutoriels supplémentaires sur React.