Qu'est-ce que l'état dans une application frontale ?

Question

Accepted Answer

**L'état** est toute donnée qui peut **changer au fil du temps** et dont l'interface utilisateur dépend pour s'afficher. Lorsque l'état change, l'interface utilisateur se met à jour pour le refléter. C'est la « mémoire » de votre application à un moment donné. ## Exemples d'état ```text ✓ A counter value, a form's input text, a toggle (on/off) ✓ Whether a modal is open, the active tab, loading/error flags ✓ The logged-in user, items in a cart, fetched API data ✓ The current theme (dark/light), selected filters ``` ## L'état pilote l'interface utilisateur ```jsx function Counter() { const [count, setCount] = useState(0); // `count` is state return ( ); } ``` L'idée centrale des frameworks modernes : **UI = f(state)**. Vous ne mettez pas à jour manuellement le DOM ; vous modifiez l'état, et le framework redessine l'interface utilisateur pour qu'elle correspond. Cliquez sur le bouton → `count` change → le nombre affiché se met à jour automatiquement. ## L'état par rapport aux autres données ```text State: changes over time, drives re-renders (count, user, isOpen) Constants: never change (PI, config URLs) — not state Derived: computed FROM state (fullName from firstName + lastName) — don't store separately ``` Toute variable n'est pas un état — seulement les données qui changent *et* qui affectent ce qui est affiché. Les valeurs que vous pouvez calculer à partir de l'état existant ne doivent pas être stockées en tant qu'état séparé (cela risque qu'elles se désynchronisent). ## Catégories d'état ```text Local/UI state → belongs to one component (input text, isOpen) Global state → shared app-wide (user, theme, cart) Server state → data fetched from an API (cached remote data) URL state → in the address bar (filters, page number) ``` ## Pourquoi c'est important Comprendre l'état comme « les données qui changent et qui pilotent l'interface utilisateur » est le fondement de tout développement frontend. Le modèle mental **UI = f(state)** explique comment fonctionnent React/Vue/Angular — vous gérez l'état, et la vue suit. Réconnaître ce qui *est* et ce qui *n'est pas* un état (et ne pas dupliquer les valeurs dérivables) est la première étape pour le gérer correctement ; tout dans la gestion d'état repose sur ce concept.