Why React Developer Candidates Freeze on the Simplest Questions

Me: What is state in React?

Candidate: State is... it is the useState hook.
It is like... the state management. We use Redux
also for state. It is very important in React.

Me: Can you give an example?

Candidate: (long pause) Like a counter?

(Mixed terms, no definition, no example until pushed.)

Me: What is state in React?

Candidate: State is data a component owns that can
change over time, and when it changes, React
re-renders the component to show the new value.

For example, whether a dropdown is open. I keep it
in useState, and clicking the button toggles it.

It matters because the UI follows the data. I do not
change the page directly; I change the state.

A common mistake is storing things in state that can
be calculated, like a filtered list.

import { useState } from "react";
import TaskRow from "./TaskRow";

export default function TaskList() {
  const [tasks, setTasks] = useState([
    { id: "t1", title: "Write tests" },
    { id: "t2", title: "Fix login bug" },
    { id: "t3", title: "Update README" },
  ]);

  const remove = (id) => setTasks((ts) => ts.filter((t) => t.id !== id));

  // BUG version: key={index}
  // Each TaskRow keeps its own note input state.
  // Remove the first task and the notes shift up one row.
  //
  // FIX: key={task.id}, so React matches rows by identity.
  return tasks.map((task) => (
    <TaskRow key={task.id} task={task} onRemove={remove} />
  ));
}

'A key tells React which item is which between
renders. When the list changes, React uses keys to
match old items with new ones, so each item keeps
its own state and DOM node.

If I use the index and remove the first item, the
second item now has index 0. React thinks it is the
old first item and gives it that item's state, so
a half-typed note can appear on the wrong task.

So I use a stable ID from the data, like task.id.'

import { useState } from "react";
import TextInput from "./TextInput";

// Controlled: React state is the single source of truth
export default function EmailField({ onValid }) {
  const [email, setEmail] = useState("");
  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

  const handleChange = (e) => {
    const next = e.target.value.trimStart();
    setEmail(next);
    if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(next)) onValid(next);
  };

  return (
    <TextInput
      label="Email"
      value={email}
      onChange={handleChange}
      error={email && !isValid ? "Enter a valid email" : ""}
    />
  );
}

// What you write:
//   (a Greeting element with name prop "Asha")

// What the modern JSX transform produces:
import { jsx as _jsx } from "react/jsx-runtime";

const element = _jsx(Greeting, { name: "Asha" });

// element is a plain object, roughly:
// { type: Greeting, props: { name: "Asha" }, key: null }

// So JSX is not HTML. It is a shorter way to write
// function calls that describe UI. That is why you use
// className instead of class and {} for expressions.

DAILY BASICS DRILL

1. Pick 5 cards from the question list.
2. For each, answer aloud in 4 moves:
     Define  -> one plain sentence
     Example -> tiny component or situation
     Why     -> what breaks without it
     Mistake -> one common pitfall
3. Record. Keep each answer under 45 seconds.
4. Play back. Mark any answer that started with
   'it is like...' or 'basically...'.
5. Redo marked answers once.

BASICS THAT CAUSE MOST FREEZES

[ ] What is a component?
[ ] What is state?
[ ] Props vs state?
[ ] Why do lists need keys?
[ ] What is JSX?
[ ] Controlled vs uncontrolled input?
[ ] What is a re-render?
[ ] What does useEffect do?
[ ] What is the virtual DOM?
[ ] What is lifting state up?
[ ] What is a fragment?
[ ] What is conditional rendering?

IF YOU FREEZE IN THE ROOM

1. Breathe once. Say: 'Let me give a simple answer.'
2. Start with an example you have built:
   'In my todo project, each task...'
3. Name the idea from the example:
   '...so the key lets React match each task.'
4. Stop. Let the interviewer ask more.

Never say 'I know this, I forgot' and stop.
An example almost always unlocks the answer.