Terrain 5 — État & hooks RN

9 drills · ~10 min · Chapitres liés : Partie 6

1. La règle de répartition du cours : où vivent (a) un toggle d’accordéon, (b) la session de jeu, (c) la durée du timer, (d) l’historique ?

✅

(a) useState local · (b) store Zustand (partagé, éphémère) · (c) store settings persisté (AsyncStorage) · (d) SQLite. L’état le plus local possible, escaladé seulement si partagé/ persistant.

2. L’anti-pattern de consommation Zustand, et la forme correcte ?

✅

const s = useSession() (tout le store → re-render à chaque changement). Correct : sélecteurs fins — useSession(s => s.score).

3. Pourquoi sélectionner une action (s => s.answer) ne cause jamais de re-render ?

✅

Les actions sont créées une fois dans create() : référence stable à vie → le sélecteur retourne toujours la même valeur.

4. Lire le store depuis un listener non-React (BackHandler, notification) ?

✅

useSession.getState() (et setState pour écrire) — l’accès hors composants, sans abonnement.

5. Un timer de jeu fiable : le pattern, et pourquoi pas un décrément par setInterval ?

✅

Stocker endsAt et calculer endsAt - Date.now() (tick = simple affichage). Le JS est gelé en arrière-plan : les ticks se perdent — l’horloge, elle, ne ment pas.

6. Détecter le retour d’arrière-plan ?

✅

AppState.addEventListener('change', s => …) — statut ‘active’ au retour (recalculer le temps, resynchroniser).

7. « Rafraîchir l’historique à chaque visite de l’onglet » : le hook, et pourquoi pas useEffect ?

✅

useFocusEffect — l’écran reste monté sous tabs/pile : useEffect([]) ne rejoue pas à la re-visite. (Et avec Query : l’invalidation le remplace avantageusement.)

8. Persister les réglages : le middleware, et les deux options clés ?

✅

persist(config, { name, storage: createJSONStorage(() => AsyncStorage), version }) — name = la clé, version+migrate pour les évolutions.

9. Que ne met-on JAMAIS dans AsyncStorage ?

✅

Les secrets (non chiffré → expo-secure-store) et les données de masse/requêtables (historique → SQLite). AsyncStorage = préférences et petits flags.

👉 Terrain suivant : 6 — Machine d’état & timer