¿Qué es el estado (state) en una aplicación frontend?

Question

Accepted Answer

**State** son datos que **pueden cambiar con el tiempo** y de los cuales depende la interfaz de usuario para renderizarse. Cuando el state cambia, la interfaz de usuario se actualiza para reflejarlo. Es la "memoria" de tu aplicación en cualquier momento dado. ## Ejemplos de state ```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 ``` ## El state impulsa la interfaz de usuario ```jsx function Counter() { const [count, setCount] = useState(0); // `count` is state return ( ); } ``` La idea central de los frameworks modernos: **UI = f(state)**. No actualizas el DOM manualmente; cambias el state y el framework vuelve a renderizar la interfaz de usuario para que coincida. Haz clic en el botón → `count` cambia → el número mostrado se actualiza automáticamente. ## State versus otros datos ```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 ``` No toda variable es state — solo datos que cambian *y* afectan lo que se renderiza. Los valores que puedes calcular del state existente no deben almacenarse como state separado (corre el riesgo de desincronizarse). ## Categorías de state ```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) ``` ## Por qué es importante Entender el state como "datos que cambian e impulsan la interfaz de usuario" es la base de todo desarrollo frontend. El modelo mental **UI = f(state)** explica cómo funcionan React/Vue/Angular — administras el state y la vista sigue. Reconocer qué *es* y *no es* state (y no duplicar valores derivables) es el primer paso hacia una buena gestión; todo en la gestión de state se basa en este concepto.