Implement useEffect cleanup in a product component

A ChannelView that subscribes by channelId and unsubscribes deterministically on dependency change, unmount, and Strict Mode double-invocation.

type ChannelMessage = { id: string; body: string; receivedAt: number };

type SubscribeFn = (
  channelId: string,
  onMessage: (message: ChannelMessage) => void
) => () => void;

type ChannelViewProps = {
  channelId: string;
  subscribe: SubscribeFn;
};

export function ChannelView({ channelId, subscribe }: ChannelViewProps) {
  const [messages, setMessages] = React.useState<ChannelMessage[]>([]);

  React.useEffect(() => {
    // The cleanup is the contract. If subscribe() opens a socket or attaches
    // a listener, every dependency change must close that exact connection
    // before opening the next one. Otherwise React renders for one channel
    // while the previous channel keeps writing into setMessages.
    let active = true;
    const unsubscribe = subscribe(channelId, (message) => {
      if (!active) return;
      setMessages((previous) => {
        // Defensive merge: dedupe by id so a server replay does not push
        // duplicate rows after a reconnect.
        if (previous.some((existing) => existing.id === message.id)) return previous;
        return [...previous, message];
      });
    });

    // Strict Mode runs effects twice in development. The active flag plus
    // unsubscribe guarantee the second run sees a clean slate.
    return () => {
      active = false;
      unsubscribe();
    };
  }, [channelId, subscribe]);

  // Resetting the local list when channel changes is correctness, not polish.
  // Without it, switching from #alpha to #beta shows the union of both.
  React.useEffect(() => {
    setMessages([]);
  }, [channelId]);

  return (
    <section aria-labelledby="channel-title">
      <h2 id="channel-title">#{channelId}</h2>
      <ul aria-live="polite">
        {messages.map((message) => (
          <li key={message.id}>{message.body}</li>
        ))}
      </ul>
    </section>
  );
}

Convert the answer into observable behavior. In a mid-senior interview, say which behaviors are covered by unit tests, interaction tests, accessibility checks, and one browser smoke path.

import { describe, it, expect, vi } from 'vitest';
import { render, screen, act } from '@testing-library/react';

describe('ChannelView', () => {
  it('unsubscribes from the previous channel before subscribing to the next', () => {
    const handlers = new Map<string, (msg: any)=> void>();
    const unsubscribed: string[] = [];

    const subscribe = vi.fn((id: string, onMessage: (msg: any) => void) => {
      handlers.set(id, onMessage);
      return () => {
        handlers.delete(id);
        unsubscribed.push(id);
      };
    });

    const { rerender } = render(<ChannelView channelId="alpha" subscribe={subscribe} />);
    act(() => handlers.get('alpha')!({ id: '1', body: 'Hi alpha', receivedAt: 1 }));
    expect(screen.getByText('Hi alpha')).toBeInTheDocument();

    rerender(<ChannelView channelId="beta" subscribe={subscribe} />);
    expect(unsubscribed).toContain('alpha');
    expect(screen.queryByText('Hi alpha')).toBeNull();

    act(() => handlers.get('beta')!({ id: '2', body: 'Hi beta', receivedAt: 2 }));
    expect(screen.getByText('Hi beta')).toBeInTheDocument();
  });

  it('ignores messages received after unmount', () => {
    const handlers = new Map<string, (msg: any)=> void>();
    const subscribe = vi.fn((id: string, onMessage: (msg: any) => void) => {
      handlers.set(id, onMessage);
      return () => handlers.delete(id);
    });
    const { unmount } = render(<ChannelView channelId="alpha" subscribe={subscribe} />);
    unmount();
    // After unmount, the handler is gone from the map; no setState fires.
    expect(handlers.has('alpha')).toBe(false);
  });
});

Shows whether you can explain React behavior while building maintainable product UI.

• Name what is render-derived and what is stored state.
• Keep side effects owned by events or effects deliberately.
• Provide a testable boundary for business logic.

• Start from the user workflow and state ownership.
• Move pure decisions out of JSX when the branch logic grows.
• Use React primitives to express ownership, not to hide unclear state.

• Colocating state improves clarity until sibling coordination becomes the real problem.
• Memoization helps only after render cost or identity churn is measured.

• Strict Mode re-running development effects.
• Stale closures after async work resolves.
• Unmounts and route changes during in-flight operations.

• Reducer or pure function test for core state transitions.
• Interaction test for the user workflow.
• Regression case for stale or repeated async behavior.

• How would this change with server rendering?
• Where would you place this state in a larger app?