State Management
79 bites tagged State Management — interview questions with model answers, and 60-second explainers.
When to adopt Pinia or NgRx over simple services?
Services work for small apps; use Pinia/NgRx when state is shared across many components, mutations are complex, or debugging/undo matters. judgment on when to add complexity. premature adoption or dismissing stores entirely.
Tearing and useSyncExternalStore in concurrent React
Tearing is inconsistent UI when an interruptible render reads a changed external store mid-pass; useSyncExternalStore subscribes and forces consistent snapshots, re-rendering synchronously on change. Concurrency consistency guarantees.
Fetching REST Data with Loading and Error State
Track loading, data, and error; fetch in an effect, check response.ok, parse JSON, handle catch and finally. data fetching with state. ignoring non-2xx responses or leaving loading true on error.
Redux versus Zustand state management
Redux uses actions, reducers, and a Provider with structured boilerplate; Zustand offers a minimal hook-based store with no provider and selective subscriptions. judgment about state-library tradeoffs.
Redux principles: store, actions, reducers
One store holds all state; actions are plain objects describing what happened; pure reducers compute the next immutable state from current state and action; dispatch drives the cycle. Redux's core model.
Local state versus global state management
Keep state local with useState/useReducer when it is used by one component or its subtree; reach for Redux or Zustand when many distant components share and mutate the same state. scoping state correctly.
Prop drilling and the Context API
Prop drilling is threading props through many intermediate components that do not use them; Context provides a value to a subtree so consumers read it directly. understanding prop drilling and Context.
Designing a multi-step wizard form pattern
A wizard controller owns step index and shared data, each step validates itself and reports up, accumulated data persists across steps. orchestrating multi-step flow plus per-step state.
Decoupling Form state from its Field components
Form holds values, errors, and status in context, Fields self-register and read/write via a hook, validation composes per field. shared form state without coupling. the Form enumerating every specific field it contains.
Purpose of watermarks in Spark Structured Streaming
A watermark sets a threshold on event-time lateness, lets late data update windows up to that bound, and tells Spark when to finalize and drop old state. streaming state management. confusing event time with processing time.
Controlled vs uncontrolled Modal component
Uncontrolled is convenient but inflexible, controlled gives parent full power and predictability, and a hybrid supports both. API design judgment for component state ownership. claiming controlled is always better.
Managing state across ephemeral instances
Keep instances stateless, externalize sessions to Redis, data to managed databases, files to object storage. stateless design discipline. storing durable state on local instance disks that vanish when an instance is replaced.
Immutable bloc state versus mutable ChangeNotifier
Immutable gives predictable diffs, easy debugging and replayability at the cost of boilerplate; mutable is terse but error-prone. reasoning about state mutability trade-offs. declaring one universally superior with no nuance.
Provider package versus raw InheritedWidget
It removes boilerplate, adds lifecycle disposal and scoped reads, and exposes select for granular rebuilds. why Provider wraps InheritedWidget. thinking Provider is unrelated to InheritedWidget or is its own state engine.
Classic BLoC with Streams and Sinks
Classic BLoC separates UI from business logic by exposing inputs as Sinks and outputs as Streams. The widget pushes events into sinks, the BLoC processes them, and emits new state on streams that the UI rebuilds from, keeping logic testable and…
How do Vue, Angular, and Svelte stores trigger component re-renders?
Tests deep knowledge of reactivity primitives. Contrast Vue's proxy subscriptions, Angular's RxJS push through async pipe or markForCheck, and Svelte's compiler-generated store invalidation. Red flag: claiming all three use virtual DOM diffing or polling.
Pass server state to client in Nuxt and name the composable
This tests Nuxt SSR state hydration. A strong answer names useState, explains server values serialize to JSON for client hydration, and warns against refs defined outside setup.
How would you implement a memoized selector for expensive derived state?
It tests cache invalidation and pure functions for reactive derived state. A strong answer covers reference tracking on inputs, returning cached results when unchanged, and requiring immutable or stable arguments.
How would you structure a scalable store for interconnected domains?
Tests domain-driven state partitioning and cross-slice derived data. Strong answers use feature slices, normalized entities, and memoized selectors; keep computed state out of the store. Red flag: a monolithic state tree with component-level recomputation.
When would you provide an Angular service at the component level?
Tests Angular DI scoping beyond singletons. A strong answer picks stateful reusable widgets, explains providers create one instance per subtree, and notes cleanup on destroy. Red flag: claiming this is for performance without mentioning state isolation.
How would you design useCounter to support shared or independent state?
Tests your grasp of scope in Vue composables. Great answers contrast module-level refs for global singleton state against function-level refs for per-instance isolation, and explain tradeoffs.
How would you cache data between a list and detail view?
Use nested keys so detail reads from list cache with staleTime to skip refetches. Splitting server and client state, sharing cache from list to detail.
Fetch data on first render and manage loading and error states
Tests lifecycle awareness and separation of concerns. Strong answer: use mount hook (onMounted, ngOnInit, onMount), hold reactive data/loading/error states, and render conditional UI branches. Red flag: calling fetch directly in template or render function.
Share state between sibling components without a state library
Tests if you over-engineer simple sibling state. Good answers lift state to the common parent, passing data down via props and changes up via events; or use built-in primitives like Svelte stores or an Angular shared service.
Get State Management bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.