Build the state and component logic for a React event-feed dashboard. Styling is out of scope. A supplied stream exposes a subscription callback and emits records with fields such as `id`, `timestamp`, `tradeType`, `side`, `size`, `price`, `bid`, `ask`, `askSize`, and `bidSize`. ### Part 1: Live Feed Subscribe to the stream, render newest events first, and separate events by trade type, including quote and sell sections. Explain subscription cleanup, duplicate IDs, and ordering when timestamps tie. #### What This Part Should Cover - One subscription lifecycle with cleanup - Immutable state updates or an external store - Deterministic ordering and deduplication - Bounded memory for a long-running feed ### Part 2: Rolling Statistics Display summary statistics using only events from the most recent 30 seconds. Events older than the window must stop contributing even when no new event arrives. Define which statistics you would compute and how event time differs from browser arrival time. #### What This Part Should Cover - Window eviction driven by time as well as arrivals - An explicit timestamp policy - Incremental aggregates and removal - Handling late or out-of-order events ### Part 3: Pause and Resume Implement pause and resume. While paused, visible feed data and summaries must not update. Explain whether events arriving during the pause are discarded, buffered, or replayed, and implement one documented policy. #### What This Part Should Cover - A precise pause semantic - Avoiding stale React closures - Safe resubscription or buffering - Correct rolling-window behavior after resume ### What a Strong Answer Covers A strong answer separates event ingestion from rendering, bounds retained state, treats timers as resources that need cleanup, and makes pause semantics observable and testable. ### Follow-up Questions - How would you reduce render frequency during a burst? - How would you test the 30-second window without waiting in real time? - When would a Web Worker or server-side aggregation be appropriate?