State Management

Context provides a way to pass data through the component tree without having to pass props down manually at every level. Useful for themes, locales, and simple global state.

Local state is internal to a single component (e.g., whether a toggle is open). Global state is shared across multiple components throughout the application (e.g., user authentication info).

UI state (client state) includes ephemeral data like form inputs or current selection. Server state is data that lives on the server and is fetched via APIs, necessitating handling for loading and error states.

Vue's reactivity system uses Proxies to track changes automatically. `ref` is for single values; `reactive` is for objects. They form the basis of all Vue state.

Pinia is the store library for Vue, providing a simple, type-safe API for managing global state. It's the official successor to Vuex and works seamlessly with the Composition API.

State management refers to the practice of managing and maintaining the values of variables and data across an application. It ensures that the application's UI reflects the current state of the data accurately.

Flux is an architectural pattern for building web applications that emphasizes a unidirectional data flow: Actions -> Dispatcher -> Store -> View.

A reducer is a pure function that takes the current state and an action, and returns a new state. This pattern allows for predictable and testable state transitions.

`useState` is best for simple values and local component state. `useReducer` is better when you have complex state logic, multiple sub-values, or when the next state depends on the previous one.

Decision criteria: App size, team experience, built-in vs third party, frequency of updates, and type of state (server vs UI).

Composables allow sharing stateful logic between components. If state is declared *outside* the function, it becomes shared "global" state for everyone calling it.

Context is built-in and great for "low-frequency" updates (themes, users). Redux/Zustand provide optimized updates for "high-frequency" data, better debugging tools, and middleware for side effects.

Immutability ensures that state is never modified directly, but instead replaced with a new version. This makes state transitions predictable and enables features like time-travel debugging.

Queries fetch data (READ). Mutations change data (WRITE). This distinction is fundamental to libraries like TanStack Query and GraphQL.

Update the UI as if an API call has succeeded before getting the response. If the call fails, the change is rolled back. This makes an application feel instant.

Pinia is the modern alternative to Vuex. It is simpler (no mutations), fully type-safe, and designed for use with the Composition API.

Redux is built on three core principles: a single source of truth (the State), state is read-only (Actions), and changes are made with pure functions (Reducers).

Vue developers often use `useAsyncData` (Nuxt) or TanStack Query for Vue to manage caching and synchronization of server data.

A cache invalidation strategy where the browser handles returning stale cached data first and then fetching a background "revalidation" update.

TanStack Query (formerly React Query) is an asynchronous state management library that takes away the struggle of fetching, caching, synchronizing and updating server state.

Signals (Preact/Solid/Qwik) provide a way to store state that allows the framework to update only the specific parts of the DOM that changed, bypassing component re-rendering entirely.

Derived state is data that can be calculated entirely from existing state. It should not be stored separately but computed on-the-fly to prevent sync issues.

Zustand is a tiny, fast, and scalable bearbones state-management solution using simplified flux principles. It is popular because it has zero boilerplate and uses hooks naturally.

Checklist: keep state normalized, favor local state by default, use computed/selectors for derived values, implement optimistic updates for better feel, and monitor for memory leaks.

Atoms-based libraries use a "distributed" state model where state is broken into tiny pieces (atoms) that components can subscribe to individually, minimizing unnecessary re-renders.

The process of converting state to a format (like JSON string) that can be stored in localStorage or sent over the wire. Values like Functions or Sets cannot be serialized directly.

A state machine defines a finite set of states (Idle, Loading, Success, Error) and explicit transitions between them, preventing impossible states.

The process of declaring cached data as stale or incorrect. In state management, this triggers a re-fetch to ensure the client stays in sync with the server.

Storing state in a flat format, often by ID, similar to a database. This avoids deeply nested structures and makes updates more efficient.

Keeping sort/filter/page parameters in the URL ensures that users can bookmark pages or share links while preserving the exact state of the UI.