Premium

Realtime feed leaks sockets and listeners

Guided debug scenario · Updated Mar 20, 2026

Route changes and filter changes keep adding listeners, so old listeners stay alive and still use old filter values.

Events start showing up more than once after route or filter changes
Some duplicates still mention old filter values

What you’ll build / What this tests

This premium React debug scenario focuses on Realtime feed leaks sockets and listeners. Read the failure signals, choose the highest-signal debug order, and defend the fix plus regression guard.

Learning goals

What is most likely causing the leak?
What would you check first? Put the best three at the top.
Which changes should be part of the first reliable fix?
What is the best way to catch this again early?

Key decisions to discuss

Separate symptom from root cause before touching code.
Choose the smallest debug step that removes the most ambiguity.
Prefer a durable fix over a UI-only patch.
Define the regression guard you would add after the fix.

Evaluation rubric

Strong answers prioritize evidence instead of guessing.
Good debug order reduces search space quickly.
The final fix should match the actual failure mode.
A senior answer closes with a guardrail or test plan.

Constraints / Requirements

React page subscribes to a shared socket. The effect runs again whenever a new filters object…
Events start showing up more than once after route or filter changes
Some duplicates still mention old filter values
Listener and subscription counts keep growing

Effect excerpt

useEffect(() => {
  const socket = getFeedSocket(url);
  const handler = (event: MessageEvent) => applyMessage(event, filters);
  socket.addEventListener('message', handler);
  socket.send(JSON.stringify({ type: 'subscribe', filters }));
}, [url, filters]);

Common pitfalls

Jumping to the fix before proving the root cause.
Treating every symptom as equally important.
Stopping at the first plausible explanation.
Skipping the regression guard after the fix.