Front-end · 8 mondes · 32 étapes

React Native

De vraies applis iOS et Android avec React.

Progression

0 %

0/32 étapes terminées

← Décryptages

Intermédiaire · 10 min de lecture

useEffect sans pièges

Synchroniser, nettoyer, et savoir quand s'en passer

1Définition

useEffect synchronise un composant avec un système extérieur à React : réseau, minuteurs, abonnements, API du téléphone. Il s'exécute après l'affichage.

2Principes fondamentaux

Après le rendu

L'effet ne bloque pas l'affichage. Le rendu reste un calcul pur ; les effets gèrent le reste.

Les dépendances décrivent la synchronisation

Toute valeur réactive lue dans l'effet (props, état) doit figurer dans le tableau. Le linter react-hooks/exhaustive-deps le vérifie pour toi.

Le nettoyage

La fonction renvoyée s'exécute avant chaque nouvelle exécution et à la disparition du composant. En développement, React monte, démonte et remonte une fois pour vérifier que ton nettoyage fonctionne.

Tout ne mérite pas un effet

Calculer une valeur à partir de l'état ou réagir à un appui ne nécessite pas d'effet : fais-le pendant le rendu ou dans le gestionnaire d'événement.

3Exemples pratiques

Ignorer une réponse périmée

Exemple

1useEffect(() => {2  let annule = false;3 4  async function charger() {5    const reponse = await fetch('https://api.exemple.com/villes/' + ville);6    const json = await reponse.json();7    if (!annule) setMeteo(json);8  }9 10  charger();11  return () => {12    annule = true;13  };14}, [ville]);

Si l'utilisateur change de ville avant la fin du chargement, l'ancienne réponse est ignorée : pas de données qui s'écrasent dans le désordre.

Un compte à rebours propre

App.tsx

1import { useEffect, useState } from 'react';2import { View, Text } from 'react-native';3 4export default function App() {5  const [reste, setReste] = useState(10);6 7  useEffect(() => {8    if (reste === 0) return;9    const id = setTimeout(() => setReste(reste - 1), 1000);10    return () => clearTimeout(id);11  }, [reste]);12 13  return (14    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>15      <Text style={{ fontSize: 96, fontWeight: '800', color: reste === 0 ? '#689b34' : '#171718' }}>16        {reste === 0 ? 'GO' : reste}17      </Text>18    </View>19  );20}

Démarrage de l'aperçu

L'effet dépend de reste : chaque seconde, il se nettoie et se relance, et s'arrête à zéro.

4Erreurs courantes

Un effet pour une valeur calculable

À éviter

const [total, setTotal] = useState(0);useEffect(() => {  setTotal(panier.reduce((s, p) => s + p.prix, 0));}, [panier]);

À faire

const total = panier.reduce((s, p) => s + p.prix, 0);

Pourquoi : L'effet provoque un rendu supplémentaire, et une valeur intermédiaire incorrecte s'affiche brièvement.

Oublier une dépendance

À éviter

useEffect(() => {  charger(idUtilisateur);}, []);

À faire

useEffect(() => {  charger(idUtilisateur);}, [idUtilisateur]);

Pourquoi : Si l'utilisateur change, l'écran affiche encore les données de l'ancien.

Oublier de se désabonner

À éviter

useEffect(() => {  const sub = Keyboard.addListener('keyboardDidShow', ouvrir);}, []);

À faire

useEffect(() => {  const sub = Keyboard.addListener('keyboardDidShow', ouvrir);  return () => sub.remove();}, []);

Pourquoi : Chaque montage ajoute un écouteur qui ne disparaît jamais.

5Subtilités à connaître

◆Une fonction ou un objet créé pendant le rendu change à chaque rendu : mis en dépendance, il relance l'effet en boucle. Déplace-le dans l'effet ou stabilise-le.
◆useLayoutEffect s'exécute avant que l'écran ne soit peint : réservé aux mesures de mise en page.
◆Pour les données serveur, une bibliothèque comme TanStack Query gère cache, annulation et rechargement mieux qu'un effet écrit à la main.

6Vérifie ta compréhension

Question 1/3

Score 0

Quand s'exécute la fonction de nettoyage ?

Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.