56React for SDET

56.1 Mental model

A React app is a tree of components. Each component is a function that returns JSX (HTML-like markup). State changes trigger re-renders; React diffs the new tree against the previous one and updates only the changed DOM nodes (reconciliation).

// Functional component
function Greeting({ name }: { name: string }) {
  return <h1>Hello, {name}</h1>;
}

// State + handler
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Clicked {count} times
    </button>
  );
}

56.2 Hooks reference

56.3 Reconciliation + keys

// BAD — without keys, React can't tell which item is which
{items.map((item, i) => <Row data={item} />)}

// GOOD — stable key
{items.map(item => <Row key={item.id} data={item} />)}

Missing keys cause subtle bugs: input state attaches to the wrong row after reordering. SDETs catch these in drag-and-drop / sortable lists.

56.4 Testing with React Testing Library

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { LoginForm } from './LoginForm';

it('submits credentials', async () => {
  const onSubmit = vi.fn();
  render(<LoginForm onSubmit={onSubmit} />);

  await userEvent.type(screen.getByLabelText('Email'), 'alice@test.com');
  await userEvent.type(screen.getByLabelText('Password'), 'p4ssw0rd');
  await userEvent.click(screen.getByRole('button', { name: 'Sign in' }));

  expect(onSubmit).toHaveBeenCalledWith({
    email: 'alice@test.com',
    password: 'p4ssw0rd',
  });
});

56.5 Mocking API calls with MSW

// src/mocks/handlers.ts
import { http, HttpResponse } from 'msw';
export const handlers = [
  http.get('/api/users/:id', ({ params }) =>
    HttpResponse.json({ id: params.id, name: 'Alice' })),
];

// In a test
import { server } from './mocks/server';
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

it('shows user name from API', async () => {
  render(<UserPage id="42" />);
  expect(await screen.findByText('Alice')).toBeInTheDocument();
});

56.6 Playwright Component Testing

npm init playwright@latest -- --ct
# pick framework: React

// Button.spec.tsx
import { test, expect } from '@playwright/experimental-ct-react';
import { Button } from './Button';

test('renders + click', async ({ mount }) => {
  let clicked = false;
  const cmp = await mount(<Button onClick={() => (clicked = true)}>Buy</Button>);
  await cmp.click();
  expect(clicked).toBe(true);
});

Component tests render in a real browser via Playwright but mount just the component (no app shell). Faster than full E2E, more realistic than jsdom.

56.7 Common React bugs SDETs catch

• Stale closures — onClick captures old state from render. Symptom: counter increments by 1 even after 3 clicks. Fix: functional updater setCount(c => c+1).
• Missing keys — list reorder bug; old input state appears on wrong row.
• useEffect over-fires — missing dep triggers infinite loop. ESLint react-hooks/exhaustive-deps catches.
• Race condition in fetch — old request resolves AFTER new one; old data overwrites new. Fix: AbortController or "ignore" flag.
• Memory leak from event listeners / timers — useEffect cleanup not returning a function.
• Hydration mismatch (SSR) — server HTML differs from client first render → warning + flicker.
• Accessibility bugs — div onClick (no role/keyboard), missing labels.

56.8 React 18 / 19 highlights

• Concurrent rendering — React can pause/resume work; users see smoother UX
• useTransition — marks updates as non-urgent
• Suspense for data fetching — declarative loading states
• Server Components (Next.js) — render on the server, ship less JS
• Actions + useActionState (React 19) — built-in form mutation patterns