# Frontend — Risques & vigilance — Index

Risques frontend/mobile susceptibles de provoquer des bugs subtils, comportements inattendus, dette technique ou régressions UX.

Avant toute proposition frontend, identifie le fichier dont le nom et la description matchent le domaine traité, puis lis-le.

---

| Fichier | Domaine | Entrées clés |
|---------|---------|--------------|
| `auth.md` | Auth, guards de rôle, entitlements, OAuth | Auth côté client, loading infini écran gated, bouton OAuth vide, guard rôle flash UX |
| `state.md` | Zustand, state management, erreurs async, optimistic UI | Erreurs silencieuses, catch sans feedback, auto-reset état dégradé, fire-and-forget refresh, boolean UI hardcodé, flag isLoading unique, erreur sans rethrow, optimistic update sous-listes, fallback catch-all mapping statut DB → UI, race `fetchEntity(reset)` early-return, `useRef(undefined)` hook réactif store, logique métier dispersée vs sélecteur dérivé, `useEffect` data.length===0 re-fetch infini, flag optimiste écrasé par hydratation, mutation détail non propagée à la liste, latch sans reset au changement de session, `:key` par index sur liste d'inputs, optimistic update slice absente |
| `navigation.md` | Expo Router, Vue Router, deep link, useEffect fetch, contexte store | Store vide deep link/reload, guard incomplet états terminaux, collection sans clé contexte, double route racine, router-link disabled, état local query param, fichiers non-route sous `src/app` Expo Router, icône découplée de la destination au renommage, activation nav path vs query |
| `design-tokens.md` | Design tokens, spacing, Tailwind, StyleSheet RN, theming light/dark | Double système espacement, dimensions via spacing, inline styles dashboard, classes Tailwind invalides, token inexistant sans fallback (border-color → currentColor), theming light/dark pièges cachés, nouveau site `colors.X` pendant migration `useThemedColors`, hook themed sans consommateur |
| `nextjs.md` | Next.js App Router, SSR, Server Actions, sécurité | useSearchParams sans Suspense, type ViewData dupliqué, composant React .ts, double validation segment, consent state ambigu, script inline XSS, window.location.reload, useTransition snapshot, window.confirm, import type server, img natif, useTransition global liste, formulaire defaultValue sans key, corrélation multi-onglets localStorage vs sessionStorage |
| `tests.md` | Jest, ts-jest, tests React Native, Vue | Config node bloque .tsx, faux test négatif, helpers copiés, test écran indirect, test façade flux réel, tests présence textuelle, dupliquer styles pour tester un hook, fix plumbing visuel sans test, fan-out sans assertion de compte, stub enfant props calculées, module gardé par office (trous de test) |
| `performance.md` | Re-renders, memoization, useCallback, fetch, bundle | Sur-renders bundle non maîtrisé, useCallback inutile inline, fetch sans timeout, bundle SPA non code-splitté, helper ordre figé → reverse caller, `FlatList renderItem` sans `React.memo` |
| `react-native.md` | React Native, fetch, ScrollView, TextInput, mobile web | Focus ring TextInput, contentInset iOS-only, fetch sans response.ok, `accessibilityRole=summary` + enfant header, bouton retour dans ScrollView, pull-to-refresh mobile lib vs custom |
| `general.md` | Accessibilité, regex, patterns transversaux, monorepo, i18n | Accessibilité oubliée a11y, regex globale singleton, Alert.prompt iOS-only, primitive UI couplée, migration partielle classes legacy, ARIA roles sans clavier, duplication logique métier monorepo, event listeners globaux modales, boutons imbriqués, fire-and-forget sans feedback, type client non MAJ extension payload, fichier modifié ≠ propre, sweep grep amorce vs liste finale, sticky bottom + nav persistante, filtre client-side liste paginée, bucket défaut par négation, code smells JS/TS, Pressable disabled a11y, redirection sans allowlist, helper usage futur code mort, helper heure courante figé, migration tokens composant CORE oublié, animation switch binaire, `as unknown as` bypass, hitSlop vs layout, hooks après early return, `useEffect` une fois booléen dérivé, double-announce VoiceOver, prop générique usage unique, icône unicode So polychrome, recherche normalisation filtrage vs alignement, deep-link `<details>` racine, retry form sans refetch, format date sans heure, `toISOString()` throw, icône `inheritAttrs:false` + SVG 100%, i18n cohérence label/a11y/comportement/données |
| `responsive.md` | Responsive, adaptation mobile, tablettes tactiles, media queries input | Gating responsive par capacité d'input (pointer fine/coarse) vs largeur seule, régressions mobile lors d'un chantier desktop (checklist QA mobile) |
