Articles Septembre nt dedek

Article 1 :

Le Hook useState en React : Un outil essentiel pour gérer l’état des composants

Les hooks de React, introduits dans la version 16.8, ont transformé la façon dont les développeurs écrivent des composants fonctionnels. Avant les hooks, les composants fonctionnels étaient limités dans leur capacité à gérer l’état et les effets secondaires, nécessitant souvent des composants de classe. Cependant, avec l’introduction des hooks comme useState et useEffect, React a permis de rendre les composants fonctionnels aussi puissants que les classes.

Dans cet article, nous nous concentrerons particulièrement sur un hook essentiel : useState.

1. useState : Gérer l’état dans un composant fonctionnel

Le hook useState permet de gérer l’état dans un composant fonctionnel. Avant les hooks, l’état d’un composant était uniquement accessible dans les composants de classe via la méthode this.state. Grâce à useState, il devient possible de gérer cet état de manière déclarative, sans avoir à utiliser de classes.

Syntaxe de base :

const [state, setState] = useState(initialState);

• state : la valeur actuelle de l’état.
• setState : une fonction qui permet de mettre à jour la valeur de l’état.
• initialState : la valeur initiale de l’état, qui peut être un simple type de donnée (string, number, etc.) ou un objet complexe.

 

Exemple de useState :

import React, { useState } from ‘react’;

function Counter() {
// Déclare une variable d’état `count` avec une valeur initiale de 0
const [count, setCount] = useState(0);

return (
<div>
<p>Vous avez cliqué {count} fois</p>
<button onClick={() => setCount(count + 1)}>Cliquez ici</button>
</div>
);
}

export default Counter;

Dans cet exemple, chaque fois que l’utilisateur clique sur le bouton, l’état count est mis à jour, ce qui provoque un nouveau rendu du composant avec la nouvelle valeur de count.

2. Utiliser une fonction comme valeur initiale

Il est possible d’utiliser une fonction pour déterminer la valeur initiale de l’état. Cela peut être utile si le calcul de l’état initial est coûteux ou dépend d’autres variables.

const [compte, setCompte] = useState(() => {
const initialValue = localStorage.getItem(‘compte’) || 0;
return parseInt(initialValue, 10);
});

Dans cet exemple, la valeur initiale de compte provient du localStorage, ce qui peut éviter des calculs inutiles lors de l’initialisation.

3. Mettre à jour l’état avec des valeurs dérivées

Lorsque l’état dépend de son ancienne valeur, il est préférable d’utiliser une fonction de mise à jour pour éviter des erreurs liées à des mises à jour asynchrones. React peut regrouper les mises à jour d’état, ce qui rend le comportement de la mise à jour un peu imprévisible si l’on ne tient pas compte de l’état précédent.

Voici comment vous pouvez utiliser une fonction pour mettre à jour l’état :

setCompte((ancienCompte) => ancienCompte + 1);

Cela garantit que la mise à jour tient compte de l’ancienne valeur de l’état et évite les problèmes de concurrence.

4. Les pièges à éviter avec useState

Bien que useState soit simple à utiliser, il existe quelques points à surveiller :

1. Rendu multiple : Chaque mise à jour d’état déclenche un nouveau rendu du composant. Cela peut devenir problématique si vous mettez à jour l’état fréquemment dans un composant complexe, entraînant des re-renders coûteux en termes de performance. Utilisez le hook useMemo ou useCallback dans ce cas.

2. Asynchronisme : Les mises à jour d’état peuvent être asynchrones, ce qui signifie que l’état ne se met pas immédiatement à jour après un appel à setState. Utilisez la fonction de mise à jour pour garantir que l’état dépend de sa valeur précédente.

3. Utilisation excessive : L’utilisation excessive de useState dans un même composant peut rendre le code difficile à maintenir. Dans de tels cas, envisagez d’utiliser des reducers avec useReducer ou de gérer l’état avec une bibliothèque externe comme Redux.

5. Conclusion

useState est un hook fondamental de React qui simplifie la gestion de l’état dans les composants fonctionnels. Grâce à sa simplicité et à sa flexibilité, il permet de créer des interfaces interactives sans nécessiter de classes complexes. Toutefois, il est important de bien comprendre son fonctionnement et les implications de ses mises à jour asynchrones pour éviter des comportements inattendus et optimiser les performances.

Article 2 :

 

Comprendre le Hook useEffect en React

Le hook useEffect est un outil incontournable dans React, permettant de gérer des effets secondaires dans les composants fonctionnels. Depuis son introduction avec React 16.8, useEffect a facilité la gestion des mises à jour du DOM, des appels API, des abonnements, et d’autres actions qui se produisent en dehors du cycle de rendu de React. Cet article explore en profondeur le fonctionnement et les cas d’utilisation de useEffect.

Qu’est-ce qu’un effet secondaire ?

Un effet secondaire désigne toute action qui se produit à l’extérieur du flux principal d’exécution de React, c’est-à-dire tout ce qui n’est pas directement lié à la mise à jour du rendu d’un composant. Par exemple, faire un appel à une API, ajouter un gestionnaire d’événements, ou manipuler directement le DOM en dehors de React sont des effets secondaires.

Dans une application React classique, tous ces effets doivent être gérés de manière appropriée pour éviter les fuites de mémoire, les comportements inattendus ou les mises à jour inutiles du DOM.

Syntaxe du Hook useEffect

La syntaxe de base de useEffect est la suivante :

useEffect(() => {
// Code de l’effet secondaire
return () => {
// Code de nettoyage (facultatif)
};
}, [dépendances]);

• Le premier argument est une fonction qui contient l’effet secondaire. Elle est exécutée après chaque rendu du composant.
• Le deuxième argument est un tableau de dépendances. Ce tableau détermine quand l’effet doit être exécuté. Si ce tableau est vide, l’effet ne sera exécuté qu’une seule fois, après le premier rendu (comportement similaire à componentDidMount en classes).
• La fonction de nettoyage (facultative) peut être retournée dans l’effet pour effectuer des actions de nettoyage avant que le composant ne soit démonté ou avant que l’effet ne soit réexécuté. Cela est utile pour des cas comme la désinscription d’événements ou l’annulation d’appels API.

Exemples d’utilisation

1. Effectuer un appel API

L’un des cas d’utilisation les plus courants de useEffect est la récupération de données depuis une API. Voici un exemple de base :

import React, { useState, useEffect } from ‘react’;

function App() {
const [data, setData] = useState(null);

useEffect(() => {
fetch(‘https://api.exemple.com/data’)
.then(response => response.json())
.then(data => setData(data))
.catch(error => console.error(‘Erreur lors de la récupération des données :’, error));
}, []); // Le tableau vide garantit que l’effet ne s’exécute qu’une seule fois

if (!data) return <div>Chargement…</div>;

return <div>Données : {JSON.stringify(data)}</div>;
}

export default App;

Dans cet exemple, l’effet secondaire se produit une seule fois après le premier rendu, ce qui est idéal pour récupérer des données initiales. L’effet ne sera pas réexécuté tant que le tableau des dépendances reste vide.

2. Ajouter et nettoyer un gestionnaire d’événements

Dans certains cas, vous devrez peut-être ajouter un gestionnaire d’événements et le nettoyer lorsqu’un composant est démonté. useEffect est parfait pour cela :

import React, { useEffect } from ‘react’;

function App() {
useEffect(() => {
const handleResize = () => {
console.log(‘Fenêtre redimensionnée’);
};

window.addEventListener(‘resize’, handleResize);

// Fonction de nettoyage pour retirer l’événement
return () => {
window.removeEventListener(‘resize’, handleResize);
};
}, []); // Aucun changement spécifique de dépendances

return <div>Redimensionnez la fenêtre pour voir les logs</div>;
}

export default App;

Ici, nous ajoutons un gestionnaire d’événements resize au niveau de l’objet window et nous nous assurons de le retirer lorsqu’il n’est plus nécessaire, ce qui évite les fuites de mémoire.

3. Effet secondaire en fonction des dépendances

Il est aussi possible de déclencher un effet secondaire lorsque certaines dépendances changent, comme une donnée dans l’état. Cela est fait en ajoutant des dépendances dans le tableau des dépendances :

import React, { useState, useEffect } from ‘react’;

function App() {
const [count, setCount] = useState(0);

useEffect(() => {
console.log(‘Le compteur a changé à’, count);
}, [count]); // Cet effet s’exécutera chaque fois que ‘count’ change

return (
<div>
<p>Compteur : {count}</p>
<button onClick={() => setCount(count + 1)}>Incrémenter</button>
</div>
);
}

export default App;

Dans cet exemple, l’effet est exécuté chaque fois que la valeur de count change.

Nettoyage des effets secondaires

Lorsque vous utilisez des effets secondaires, il est important de libérer les ressources et d’effectuer un nettoyage lorsque le composant est démonté ou avant que l’effet ne soit réexécuté. Cela peut être fait dans la fonction de nettoyage retournée par useEffect :

useEffect(() => {
const timer = setInterval(() => {
console.log(‘Chaque seconde’);
}, 1000);

// Fonction de nettoyage pour arrêter le timer
return () => clearInterval(timer);
}, []); // Effet exécuté une seule fois

Ici, clearInterval(timer) garantit que l’intervalle est nettoyé lorsque le composant est démonté.

Conclusion

Le hook useEffect est un outil très puissant et flexible dans React, permettant de gérer les effets secondaires de manière propre et efficace. En comprenant son fonctionnement, vous pouvez l’utiliser pour gérer des appels API, manipuler le DOM, ajouter des écouteurs d’événements et bien plus encore, tout en vous assurant que les ressources sont correctement nettoyées. C’est un élément essentiel pour écrire des applications React performantes et maintenables.