React.js : comment comparer une nouvelle valeur avec une valeur précédente via useRef ?
Le framework JavaScript ReactJS permet une grande liberté au développeur. On peut ainsi adapter les composants pour qu'ils aient le comportement que l'on souhaite. Grâce aux Hooks, les composants fonctionnels peuvent se comporter de la même manière que les composants développés au sein d'une classe. Si vous souhaitez comparer une valeur avec une valeur précédente, vous allez devoir ainsi créer votre propre Hook.
En plus de proposer plusieurs options, ReactJS possède également une documentation très détaillée et qui notamment aborde ce point. Il s'agit d'une problématique souvent rencontrée par les développeurs. Pour créer ce Hook, vous pouvez vous baser sur un autre Hook, "useRef". Le Hook "useRef" retourne un objet qui ne change pas de valeur au fur et à mesure du cycle de votre composant. Vous pouvez ainsi stocker dans l'attribut "current" la valeur de l'objet pour ensuite effectuer une comparaison une fois que la valeur a changé. On se sert pour cela du Hook useEffect(). Ainsi, lors de chaque changement du composant, la valeur précédente est récupérée avant le changement et retournée par la fonction. Ce "Hook" créé a été nommé "usePrevious" dans la documentation du framework.
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}
Vous pouvez ensuite utiliser cette fonction avant de faire votre changement, et effectuer votre comparaison avec un nouvel appel de "useEffect". Ce Hook est très souvent utilisé. Les développeurs du framework ont d'ailleurs indiqué dans la documentation qu'ils envisageaient d'en faire un "Hook" à part entière lors d'une future version.
const Composant= (props) => {
const {element} = props
const elementPrecedent = usePrevious({element]);
useEffect(() => {
if(element == elementPrecedent) {
//Traitement si la valeur n'a pas changé
}
else {
//Traitement si la valeur a changé
}
}, [element])
}