Why Good React Developer Candidates Still Get Rejected

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

test("submits trimmed email and password", async () => {
  const user = userEvent.setup();
  const onSubmit = vi.fn(); // jest.fn() if you use Jest
  render(<LoginForm onSubmit={onSubmit} />);

  await user.type(screen.getByLabelText(/email/i), "  asha@example.com ");
  await user.type(screen.getByLabelText(/password/i), "secret123");
  await user.click(screen.getByRole("button", { name: /log in/i }));

  expect(onSubmit).toHaveBeenCalledWith({
    email: "asha@example.com",
    password: "secret123",
  });
});

test("shows an error when email is empty", async () => {
  const user = userEvent.setup();
  render(<LoginForm onSubmit={vi.fn()} />);
  await user.click(screen.getByRole("button", { name: /log in/i }));
  expect(screen.getByRole("alert")).toHaveTextContent(/email is required/i);
});

// Typing props and an API response: the first
// TypeScript skills most React teams expect.

export type Order = {
  id: string;
  total: number;
  status: "pending" | "paid" | "shipped";
  createdAt: string; // ISO date
};

export type OrderRowProps = {
  order: Order;
  onSelect?: (id: string) => void;
};

export async function getOrders(): Promise<Order[]> {
  const res = await fetch("/api/orders");
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return (await res.json()) as Order[];
}

// status: "cancelled" would now be a compile error,
// which is exactly why teams like typed data.

// Asked: 'add a show/hide details button'

// store/uiSlice.js
const uiSlice = createSlice({
  name: "ui",
  initialState: { detailsOpen: false },
  reducers: { toggleDetails: (s) => { s.detailsOpen = !s.detailsOpen; } },
});

// Details.jsx
const open = useSelector((s) => s.ui.detailsOpen);
const dispatch = useDispatch();
const onToggle = useCallback(() => dispatch(toggleDetails()), [dispatch]);

// Three files and a global store for one boolean
// used by one component.

import { useState } from "react";
import DetailsPanel from "./DetailsPanel";
import ToggleButton from "./ToggleButton";

export default function ProductDetails({ product }) {
  const [open, setOpen] = useState(false);

  return [
    <ToggleButton
      key="btn"
      expanded={open}
      onClick={() => setOpen((o) => !o)}
      label={open ? "Hide details" : "Show details"}
    />,
    open ? <DetailsPanel key="panel" product={product} /> : null,
  ];
}

// Say aloud: 'If other parts of the page needed this
// state, I would lift it up. A global store only makes
// sense if distant components share it.'

Q: How would you speed up a slow product list?

Rambling:
'So performance in React is a big topic, there is the
virtual DOM, and reconciliation, and memo, and also
lazy loading, and code splitting, and I read that...'

Answer first:
'First I would measure with the React Profiler to see
which component is slow. If it is rendering many rows,
I would virtualise the list so only visible rows render.
If each row re-renders on unrelated changes, I would
memoise the row component with React.memo.'

Polite feedback request after a rejection:

Subject: Thank you, and a request for feedback

Hi [Name],

Thank you for the update and for the interviews
for the React Developer role. I enjoyed the machine
coding round in particular.

If possible, I would really value one or two points
I could improve, technical or otherwise, before my
next interviews.

Thank you again for your time.
[Your name]

POST-INTERVIEW REVIEW

Company / role: ___________________________
Rounds cleared: ___________________________
Round where it ended: _____________________

Questions I struggled with:
1. ______________________________________
2. ______________________________________

Did the job post mention a skill I lack?
  TypeScript / Testing / Next.js / Other: ___

Were my answers too long or too short? _____
Did I over-build any solution? Y / N

One action before next interview: _________

IF THE GAP IS...

TypeScript -> convert your best project; type
  props, state, API responses and event handlers.

Testing -> add React Testing Library tests for
  one form, one list and one custom hook.

Over-engineering -> redo two machine coding tasks
  with useState first; write one sentence on when
  you would scale up.

Communication -> record 5 answers, cut each to
  one minute with the answer in the first sentence.

TRACK ACROSS INTERVIEWS

Interview | Ended at round | Main struggle
----------|----------------|---------------
Company A | Machine coding | Ran out of time
Company B | Tech deep dive | Testing questions
Company C | Manager round  | Long answers

Look for the struggle that appears twice.
Fix that one first, then reapply widely.