ajout contextes agents

10_frontend_patterns_valides.md

@@ -197,11 +197,91 @@ Ne jamais :
 - [ ] États loading / disabled gérés
 - [ ] Tests sur cas valides et invalides
 
+---
+
+## Pattern : Navigation réactive post-action async (React / Expo Router)
+
+### Synthèse
+
+- **Objectif** : déclencher la navigation après une action asynchrone (login, register, submit) de façon idiomatique et sans bypasser la réactivité React.
+- **Contexte** : SPA ou app mobile React avec state management (Zustand, Redux, Context) et router déclaratif (React Router, Expo Router, Next.js App Router).
+- **Quand l'utiliser** : dès qu'une navigation dépend du résultat d'une action async.
+- **Quand l'éviter** : navigations synchrones sans état async impliqué.
+
+### Analyse
+
+- **Avantages** :
+  - Respecte le cycle de vie React (pas de lecture de state hors cycle)
+  - Re-render automatique si l'état change entre-temps
+  - Testable : on peut assert sur l'état, pas sur des effets de bord
+- **Limites / vigilance** :
+  - Ne pas oublier les dépendances du `useEffect` (ESLint react-hooks/exhaustive-deps)
+  - Gérer le cas "composant démonté" si la navigation peut être annulée
+
+### Validation
+
+- Validé le : 07-03-2026
+- Contexte technique : React 18+ / Zustand / Expo Router — pattern applicable sur React Router, Next.js App Router
+
+### Implémentation (exemple minimal)
+
+```typescript
+// ❌ Anti-pattern : lecture de state hors cycle React
+const handleSubmit = async () => {
+  await login(email, password);
+  const { accessToken } = useAuthStore.getState(); // bypasse la réactivité
+  if (accessToken) router.replace('/(tabs)');
+};
+
+// ✅ Pattern correct : useEffect réactif sur le state
+const { accessToken, isLoading, error } = useAuthStore();
+
+useEffect(() => {
+  if (accessToken && !isLoading && !error) {
+    router.replace('/(tabs)');
+  }
+}, [accessToken, isLoading, error]);
+
+const handleSubmit = async () => {
+  await login(email, password);
+  // la navigation se déclenche via useEffect quand le store se met à jour
+};
+```
+
+### Pour les callbacks OAuth (ref nécessaire)
+
+```typescript
+// Quand un callback externe déclenche la navigation
+const pendingOAuth = useRef(false);
+
+useEffect(() => {
+  if (pendingOAuth.current && accessToken) {
+    pendingOAuth.current = false;
+    router.replace('/(tabs)');
+  }
+}, [accessToken]);
+
+const handleOAuth = async () => {
+  pendingOAuth.current = true;
+  await exchangeWithIdp(token);
+};
+```
+
+### Checklist
+
+- [ ] Aucun `store.getState()` utilisé pour lire l'état post-action dans un handler
+- [ ] `useEffect` avec dépendances explicites (state pertinent + isLoading + error)
+- [ ] Cas d'erreur géré (ne pas naviguer si error est défini)
+- [ ] `useRef` si le trigger vient d'un callback externe (OAuth, deep link)
+
+---
+
 ### Index des patterns
 
 - Gestion explicite des états UI (loading / empty / error)
 - Séparation claire server state / client state
 - Formulaire robuste avec validation et erreurs explicites
+- Navigation réactive post-action async (React / Expo Router)
 
 ⸻