5 CONSEILS DE PRO CSS
Améliorez vos compétences en conception Web grâce à ces 5 conseils CSS professionnels ! Apprenez des techniques expertes pour créer des styles plus propres et plus efficaces pour vos projets.
React fournit des outils puissants pour gérer l'état et les références dans les composants fonctionnels. Deux hooks couramment utilisés, useState et useRef, reviennent souvent dans les discussions sur la gestion du comportement des composants. Bien qu'ils puissent sembler similaires à première vue, ils ont des objectifs différents. Dans ce blog, nous explorerons les principales différences entre useState et useRef et quand utiliser chacun.
Le hook useState est utilisé pour gérer la logique d'état dans les composants React. Il vous permet de créer des variables d'état, qui entraîneront un nouveau rendu du composant chaque fois que leurs valeurs changent.
Déclenche des rendus : Toute mise à jour d'une variable useState entraînera un nouveau rendu du composant pour refléter le nouvel état.
Mises à jour asynchrones : Les mises à jour d'état sont regroupées et appliquées de manière asynchrone.
Utilisé pour l'état de l'interface utilisateur : Idéal pour gérer des états qui affectent directement ce que l'utilisateur voit, tels que les entrées de formulaire, les compteurs ou les bascules.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Current count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
Le hook useRef est principalement utilisé pour gérer des références mutables qui ne déclenchent pas de nouveaux rendus. Il peut stocker une référence à un élément DOM ou conserver une valeur mutable entre les rendus.
Ne déclenche pas de rendus : La mise à jour d'une valeur useRef n'entraîne pas le rendu du composant.
Utilisé pour les références : Souvent utilisé pour référencer des éléments DOM ou stocker des valeurs qui doivent persister entre les rendus sans affecter l'interface utilisateur.
Accès à la valeur actuelle : La propriété current est utilisée pour accéder ou mettre à jour la valeur stockée dans la référence.
import React, { useRef } from 'react';
function InputFocus() {
const inputRef = useRef();
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" placeholder="Click the button to focus" />
<button onClick={focusInput}>Focus Input</button>
</div>
);
}
Fonctionnalité | useState | useRef |
---|---|---|
Objectif | Gère l'état qui déclenche des rendus | Conserve une référence mutable |
Déclenchement des rendus | Oui | Non |
Utilisation | États liés à l'interface utilisateur | Références ou valeurs persistantes |
Mises à jour | Asynchrones | Synchrones |
Utilisez useState lorsque :
Vous voulez que les modifications d'une valeur déclenchent un nouveau rendu du composant.
Vous gérez des états liés à l'interface utilisateur, comme les entrées de formulaire, les bascules de visibilité ou les listes dynamiques.
La valeur est directement liée à ce qui est affiché dans l'interface utilisateur.
function TextInput() {
const [text, setText] = useState('');
return (
<div>
<input
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="Type something"
/>
<p>Typed Text: {text}</p>
</div>
);
}
Utilisez useRef lorsque :
Vous avez besoin de référencer directement un élément DOM.
Vous souhaitez conserver des valeurs entre les rendus sans déclencher de rendus.
Vous avez besoin d'une variable mutable que React ne suit pas dans le cycle de rendu.
function RenderCounter() {
const renderCount = useRef(0);
renderCount.current += 1;
return <p>Component rendered {renderCount.current} times</p>;
}
Dans certains cas, vous pourriez avoir besoin à la fois de useState et de useRef. Par exemple, si vous voulez gérer un état qui affecte l'interface utilisateur tout en suivant une valeur mutable en arrière-plan.
function Timer() {
const [seconds, setSeconds] = useState(0);
const timerRef = useRef();
const startTimer = () => {
timerRef.current = setInterval(() => {
setSeconds((prev) => prev + 1);
}, 1000);
};
const stopTimer = () => {
clearInterval(timerRef.current);
};
return (
<div>
<p>Seconds: {seconds}</p>
<button onClick={startTimer}>Start</button>
<button onClick={stopTimer}>Stop</button>
</div>
);
}
Les hooks useState et useRef sont essentiels dans React, chacun ayant un objectif distinct. Comprendre quand les utiliser vous aidera à mieux gérer le comportement des composants. Utilisez useState pour les états qui impactent l'interface utilisateur et déclenchent des rendus, et useRef pour des valeurs persistantes sans mises à jour de l'interface utilisateur. En maîtrisant ces hooks, vous serez prêt à créer des applications React dynamiques et réactives avec facilité !