Share state between sibling components without a state library

WHAT THIS TESTS: This question tests whether you solve everyday component communication with built-in framework tools instead of defaulting to heavy state management. Interviewers care about pragmatism, unidirectional data flow, and knowing where the complexity threshold lies between local state and global stores.

A GOOD ANSWER COVERS: First, lift the shared state to the closest common ancestor and treat that parent as the single source of truth. The parent passes data down via props or bindings, and siblings notify the parent of changes through events so the parent updates the authoritative value. Second, name framework-specific built-in shortcuts: in Angular, create a root-provided singleton service exposing a BehaviorSubject or Signal so both siblings consume the same reactive stream via dependency injection; in Svelte, import a writable store from a plain module and subscribe in both components since stores are first-class; in Vue, use props and emit for direct parent mediation, or provide and inject if the tree is deep. Third, justify why a store library is unnecessary here, such as avoiding boilerplate and keeping state colocated with the owning UI.

COMMON WRONG ANSWERS: A red flag is immediately naming Vuex, Pinia, NgRx, or Redux without mentioning parent-child contracts. Suggesting an event bus is another anti-pattern, deprecated in Vue 3 and discouraged because it creates untraceable implicit dependencies. Proposing localStorage or URL parameters for transient UI state breaks reactivity. In Angular, providing a service at the component level instead of root so siblings see different instances is a frequent trap. Mutating props directly inside children without emitting an event also signals a misunderstanding of unidirectional flow.

LIKELY FOLLOW-UPS: Expect questions about scaling the pattern when the tree grows deep, which opens discussion of Vue provide and inject, Angular hierarchical injectors, or Svelte context. The interviewer may ask how to persist state across routes or handle derived state efficiently. They will also ask when a full store actually makes sense, which is your cue to mention cross-feature communication, middleware, or truly global state unrelated to any specific view hierarchy.

ONE CONCRETE EXAMPLE: Imagine two sibling tiles, one with a temperature slider and one displaying the value. The parent holds the reactive temperature variable, binds it to the slider, and listens for update events; when the slider moves, the parent updates its state and the display tile re-renders. In Angular, you could instead place a BehaviorSubject in a root-provided SettingsService and inject it into both tiles. In Svelte, you could define a writable store in a plain module and import it into both components, letting them react without parent involvement.