State Management
79 bites tagged State Management — interview questions with model answers, and 60-second explainers.
How do Svelte Stores work and how do you create custom ones?
Tests Svelte store contract mastery. A strong answer defines the subscribe/unsubscribe interface, wraps writable() with custom set/update logic, subscribes via $ prefix or manually, and uses $store in templates.
Apollo Client: GraphQL as Reactive State
Apollo Client turns your GraphQL API into reactive state that components read like a local cache. It shines when multiple views share overlapping data, but teams often footgun by sending one massive query instead of letting the cache normalize fragments.
How would you structure variables and expressions for a price configurator?
This tests reactive state modeling in Figma. A strong answer uses a string variable for the base model and booleans for add-ons, binding the price text to an expression that maps the base to its cost and sums active extras.
How would you prototype a shared currently playing state in Figma?
This tests global state via Figma variables. Use one string variable for the active track; bind list and miniplayer to it via component properties; wire taps to update the variable. Avoid duplicating state per frame or faking persistence with overlays.
What drives your choice between Zustand and Redux Toolkit at scale?
What it tests: matching state philosophy to constraints, not hype. Outline: weigh Zustand's minimal footprint against Redux Toolkit's DevTools and structured async patterns. Red flag: claiming one is always better regardless of team size or debugging needs.
How to implement a derived Redux slice performantly and maintainably?
This tests minimal state and memoized selector design. Use Reselect's createSelector to compute data from multiple slices, keeping state minimal and avoiding redundant work. A red flag is storing derived values in Redux or recalculating without memoization.
What is state hydration in Next.js SSR with Redux or Zustand?
Hydration attaches listeners to server HTML; serialize state to an escaped script tag; boot client store before React or markup is discarded. React hydration and server-to-client store serialization.
Explain atomic state management and how it differs from Redux
This tests bottom-up vs top-down architecture. Good response contrasts atom graphs with Redux's monolithic store, notes atoms avoid extra rerenders sans selectors, and flags granular subscriptions.
How would you handle an async API call in Redux Toolkit versus Zustand?
Tests structured async state machines versus lightweight patterns. A strong answer contrasts createAsyncThunk's pending/fulfilled/rejected lifecycles with Zustand's direct set() in async functions, noting Redux's traceability trade-off.
How do Redux actions, reducers, and click-to-render data flow work?
Tests Redux unidirectional flow and immutability. Strong answer: actions are plain event objects, reducers are pure functions returning new state, and flow goes dispatch to store to UI. Red flag: actions mutating state or reducers with side effects.
When would you choose Redux or Zustand over React's built-in hooks?
Choose global state when many components share rapidly changing state, logic is complex, or updates must be traceable. when Context and useState fail at scale.
Design a multi-step wizard form pattern in React
Shared state, step validation, and resilient navigation. A great answer uses one form instance with per-step Zod schemas, a context stepper, and localStorage persistence. Red flag: isolated forms per step that lose data on navigation.
Advantages of dedicated React form libraries over manual state
Your grasp of the hidden costs of fully controlled form state in React. Mention re-render reduction via refs, declarative validation, less boilerplate, and custom input support.
How would you implement real-time client-side validation in React?
Tests state-driven UI thinking over imperative DOM updates. A strong answer uses a status enum like typing or error, derives validation from state instead of redundant booleans, and conditionally renders feedback.
Prefer multiple useState or useReducer for multi-field forms?
Separate useState for simple fields; one object for coupled validation or batch resets; useReducer for complex logic. Matching state structure to complexity. Picking one pattern for all forms without discussing coupling.
Explain controlled vs uncontrolled React form inputs and trade-offs
Tests state versus DOM ownership. Controlled inputs bind to React state via onChange; uncontrolled inputs read from DOM via refs. Trade-offs: reactivity, validation, complexity. Red flag: saying uncontrolled is easier while ignoring lost live validation.
Describe combining useContext and useReducer for scalable feature state
This tests replacing prop drilling with a context-reducer pattern. A strong answer covers two contexts for state and dispatch, a provider wrapping the subtree, and a pure reducer. A red flag is one global context or async logic inside the reducer.
Use useContext to provide theme state without prop drilling
This tests global state sharing without prop drilling. A strong answer uses createContext and a Provider with useState at the app root, then calls useContext in nested components. Red flag: ignoring re-render costs or placing the Provider too deep.
Explain useReducer and when to prefer it over useState
Tests if you know useReducer centralizes complex state transitions better than scattered useState. Answer: define reducer/dispatch, then contrast with useState via interdependent fields or deep updates. Red flag: calling it only for global state or Redux.
Zustand Middleware: Intercept Every Set Call
Zustand middleware intercepts set calls to add logging, persistence, or devtools without touching business logic. Use it when updates need the same side effect, like localStorage sync.
Design state-driven navigation for a conditional wizard in UIKit and SwiftUI
This tests separating navigation state from UI. Model the flow as a state machine enum, derive the stack from state, and unit test transitions in plain Swift. A red flag is imperative pushes inside views or view controllers.
What NavigationView limitations did NavigationStack solve for programmatic navigation?
This tests why NavigationView programmatic navigation was brittle. A strong answer contrasts scattered NavigationLink isActive booleans and broken multi-destination stacks against NavigationStack's unified path array. A red flag is calling it a simple rename.
How do you pop to root in SwiftUI NavigationStack?
This tests declarative state-driven navigation. A strong answer binds NavigationStack to a NavigationPath, passes the binding down, and clears the path to pop to root. A red flag is suggesting UIKit popToRootViewController or legacy isActive hacks.
Differences between @State, @Binding, @ObservedObject, and @EnvironmentObject
Tests SwiftUI state ownership and propagation. @State owns local value types; @Binding borrows for two-way edits; @ObservedObject accepts an external ObservableObject; @EnvironmentObject reads one from the environment.
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.