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

useState en profondeur

Comprendre enfin quand et pourquoi l'écran se met à jour

1Définition

useState est un hook qui associe une valeur persistante à un composant. Chaque appel du setter programme un nouveau rendu avec la nouvelle valeur.

2Principes fondamentaux

L'état est un instantané

Pendant un rendu, et dans les fonctions créées pendant ce rendu, la valeur d'état ne change pas. C'est pourquoi setN(n + 1) deux fois donne +1.

Les mises à jour sont regroupées

React regroupe les mises à jour d'un même événement et fait un seul rendu à la fin.

Comparaison par référence

React compare l'ancienne et la nouvelle valeur avec Object.is. Muter un objet garde la même référence : le changement peut passer inaperçu.

L'état appartient à une position

L'état est lié à la place du composant dans l'arbre. Si le composant disparaît, son état est perdu ; la prop key permet de le réinitialiser volontairement.

3Exemples pratiques

Instantané et mise à jour fonctionnelle

App.tsx

1import { useState } from 'react';2import { View, Text, Pressable, StyleSheet } from 'react-native';3 4export default function App() {5  const [a, setA] = useState(0);6  const [b, setB] = useState(0);7 8  return (9    <View style={styles.ecran}>10      <Pressable style={styles.bouton} onPress={() => { setA(a + 1); setA(a + 1); setA(a + 1); }}>11        <Text style={styles.texte}>setA(a + 1) ×3 → {a}</Text>12      </Pressable>13      <Pressable style={styles.bouton} onPress={() => { setB((p) => p + 1); setB((p) => p + 1); setB((p) => p + 1); }}>14        <Text style={styles.texte}>setB(p =&gt; p + 1) ×3 → {b}</Text>15      </Pressable>16    </View>17  );18}19 20const styles = StyleSheet.create({21  ecran: { flex: 1, justifyContent: 'center', padding: 20, gap: 14 },22  bouton: { padding: 18, borderRadius: 14, backgroundColor: '#e7dcf2' },23  texte: { fontFamily: 'monospace', fontSize: 15 },24});

Démarrage de l'aperçu

Appuie sur les deux boutons : le premier avance de 1, le second de 3.

Mettre à jour un objet imbriqué

Exemple

1const [profil, setProfil] = useState({ nom: 'Awa', adresse: { ville: 'Abidjan' } });2 3setProfil({4  ...profil,5  adresse: { ...profil.adresse, ville: 'Dakar' },6});

Chaque niveau modifié est recopié. Si l'état devient trop imbriqué, envisage useReducer ou d'aplatir la structure.

4Erreurs courantes

Muter puis appeler le setter

À éviter

liste.push(nouvel);setListe(liste);

À faire

setListe([...liste, nouvel]);

Pourquoi : Même référence : React peut ignorer la mise à jour, et le bug n'apparaît qu'à certains moments.

Lire l'état juste après le setter

À éviter

setN(n + 1);console.log(n); // ancienne valeur

À faire

const suivant = n + 1;setN(suivant);console.log(suivant);

Pourquoi : Le setter ne modifie pas la variable du rendu courant ; il programme le prochain rendu.

Dupliquer une donnée dérivable

À éviter

const [taches, setTaches] = useState([]);const [nbFaites, setNbFaites] = useState(0);

À faire

const [taches, setTaches] = useState([]);const nbFaites = taches.filter((t) => t.faite).length;

Pourquoi : Une valeur calculable n'a pas besoin d'état : on évite les désynchronisations.

5Subtilités à connaître

◆useState(() => calculLourd()) n'exécute le calcul qu'au premier rendu (initialisation paresseuse).
◆Appeler le setter avec la même valeur (selon Object.is) ne provoque pas de nouveau rendu.
◆Pour une logique d'état riche (plusieurs actions), useReducer centralise les transitions.
◆Changer la key d'un composant le recrée entièrement, avec un état neuf.

6Vérifie ta compréhension

Question 1/3

Score 0

setN(n + 1) appelé trois fois de suite avec n = 0 donne…

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