React Output Questions 2026, 30 What-Will-This-Print

Output questions are the fastest filter in a React screen. Candidates report that a single snippet, "what does this log" or "how many times does this render", reveals more than ten trivia questions. This guide collects 30 output puzzles from candidate-reported rounds and public preparation resources, each with the exact output and a precise explanation of the render model behind it.

The skill being tested: can you trace React's render-commit cycle, state batching, and closure capture in your head? That is what these puzzles measure.

Difficulty map

Tier	Focus	Puzzles
Easy	render basics, JSX evaluation	Q1 to Q10
Medium	batching, closures, effect order	Q11 to Q22
Hard	reconciliation, concurrent, React 19	Q23 to Q30

Easy Output Puzzles (Q1 to Q10)

Q1.

function App() {
  console.log('render');
  return <button onClick={() => console.log('click')}>Hi</button>;
}

Output on mount: render. Clicking logs click but does NOT re-render (no state change). Why: logging in the body runs every render; the click handler does not setState.

Q2.

const [n, setN] = useState(0);
return <button onClick={() => { setN(n + 1); console.log(n); }}>{n}</button>;

First click logs: 0. Why: n is the snapshot from the current render; the new value is visible only on the next render.

Q3.

{0 && <p>shown?</p>}

Output: renders 0 on screen. Why: 0 is falsy but React renders the number 0. Use Boolean(x) && ... or x ? ... : null.

Q4.

{[1,2,3].map(x => <li>{x}</li>)}

Output: renders 1,2,3 but logs a key warning. Why: missing key prop.

Q5.

const [s] = useState('a');
return <input value={s} />;

Behavior: the input is read-only (cannot type). Why: controlled value with no onChange freezes the field; React warns.

Q6.

function App() { return <><h1>A</h1><h1>B</h1></>; }

Output: A and B side by side with no wrapper DOM node. Why: Fragment renders children without an extra element.

Q7.

const x = undefined;
return <div>{x}</div>;

Output: empty div. Why: React ignores undefined, null, false, and true as children.

Q8.

return <div>{'2' + 2}</div>;

Output: 22. Why: string concatenation in JS, evaluated before render.

Q9.

const [c, setC] = useState(0);
useEffect(() => console.log('effect', c));
return <button onClick={() => setC(c + 1)}>{c}</button>;

On mount logs: effect 0. After one click logs: effect 1. Why: no dependency array means the effect runs after every render.

Q10.

return <p>{[1,2,3]}</p>;

Output: 123 (no separators). Why: React joins array children without commas.

Medium Output Puzzles (Q11 to Q22)

Q11. Batching count

const [n, setN] = useState(0);
function go() { setN(n + 1); setN(n + 1); setN(n + 1); }

After one click, n is: 1. Why: all three read the same stale n (0) and set it to 1. React batches them.

Q12. Functional updater

function go() { setN(p => p + 1); setN(p => p + 1); setN(p => p + 1); }

After one click, n is: 3. Why: each updater receives the latest queued value.

Q13. setState in useEffect with no deps

useEffect(() => { setN(n + 1); });

Result: infinite re-render loop. Why: every render schedules an effect that updates state, triggering another render.

Q14. Stale closure in interval

const [n, setN] = useState(0);
useEffect(() => {
  const id = setInterval(() => console.log(n), 1000);
  return () => clearInterval(id);
}, []);

Logs: 0 forever even as n changes. Why: the interval captured n from the first render; deps are empty.

Q15. Effect cleanup order

useEffect(() => { console.log('A'); return () => console.log('A cleanup'); }, [dep]);

On dep change, logs: A cleanup then A. Why: cleanup of the previous effect runs before the new effect.

Q16. Two effects order

useEffect(() => console.log('1'));
useEffect(() => console.log('2'));

Logs: 1 then 2. Why: effects run top to bottom in definition order.

Q17. Parent re-render, child memo

const Child = React.memo(() => { console.log('child'); return null; });
// parent re-renders with same props

Child logs: only once on mount. Why: memo skips re-render when props are shallow-equal.

Q18. Inline function breaks memo

<Child onClick={() => {}} />  // Child is React.memo

Child logs: every parent render. Why: the arrow is a new reference each render, so shallow compare fails.

Q19. Key change resets state

<Counter key={tab} />

Behavior: changing tab resets Counter's internal state. Why: a new key unmounts and remounts the component.

Q20. Derived state stale bug

const [items, setItems] = useState([]);
const [count] = useState(items.length);

count stays: 0 after items grow. Why: count was initialized once and never recomputed; derive during render instead.

Q21. Conditional hook crash

if (flag) useState(0);

Result: "Rendered fewer hooks" error when flag flips. Why: hooks are tracked by call order.

Q22. useRef does not re-render

const r = useRef(0);
return <button onClick={() => { r.current++; }}>{r.current}</button>;

Display: stays 0 on screen even after clicks. Why: mutating a ref does not schedule a render; the displayed value updates only on the next unrelated render.

Hard Output Puzzles (Q23 to Q30)

Q23. State update is async snapshot

const [n, setN] = useState(0);
async function go() {
  setN(5);
  await Promise.resolve();
  console.log(n);
}

Logs: 0. Why: n is captured from the render closure; awaiting does not refresh it.

Q24. Reconciliation by index vs key

{items.map((it, i) => <Row key={i} item={it} />)}

After deleting the first item: inputs inside rows show wrong values. Why: index keys make React reuse the wrong DOM nodes; use stable IDs.

Q25. useLayoutEffect vs useEffect timing

useLayoutEffect(() => console.log('layout'));
useEffect(() => console.log('passive'));

Logs: layout before paint, passive after paint. Why: layout effects are synchronous pre-paint.

Q26. StrictMode double effect

useEffect(() => console.log('mount'), []);

In React 18 dev, logs: mount, then cleanup, then mount again. Why: Strict Mode double-invokes to surface missing cleanup. Production runs once.

Q27. Batching across async boundary (React 18)

setTimeout(() => { setA(1); setB(2); }, 0);

Renders: once. Why: React 18 automatic batching batches updates even inside timeouts and promises.

Q28. useTransition keeps input responsive

startTransition(() => setHeavyQuery(input));

Behavior: typing stays smooth, results lag. Why: the transition marks the heavy update as interruptible.

Q29. use hook suspends

const data = use(promise);

Behavior: component suspends until the promise resolves, showing the nearest Suspense fallback. Why: use integrates with Suspense.

Q30. Object dependency loops

useEffect(() => { fetchIt(); }, [{ id }]);

Result: runs every render. Why: the inline object is a new reference each render; depend on id, not the object.

React Output Mock Test, 2026 Edition

5 original puzzles calibrated to the 2026 React screening batch by Aditya Sharma, from candidate-reported patterns.

Question 1

setN(n+1) three times in one handler, starting at 0, gives n =

a) 3 b) 1 c) 0 d) error

Solution: All read the same stale snapshot; net +1. Answer: (b)

Question 2

{0 && <p>x</p>} renders:

a) nothing b) the number 0 c) <p>x</p> d) error

Solution: React renders the falsy number 0. Answer: (b)

Question 3

An interval logging n with empty deps logs:

a) updated n b) the first-render n forever c) undefined d) error

Solution: Stale closure captures the initial value. Answer: (b)

Question 4

Index keys after deleting item 0 cause:

a) crash b) wrong DOM/state reuse c) nothing d) extra render

Solution: Index keys misalign nodes; use stable IDs. Answer: (b)

Question 5

In React 18, setA and setB inside setTimeout cause how many renders?

a) 2 b) 1 c) 0 d) 3

Solution: Automatic batching merges them into one. Answer: (b)

FAQ, React Output Questions

Q: How do I get faster at output questions? Trace the render-commit cycle on paper for each snippet. Candidates report that drilling batching and closures specifically yields the biggest jump.

Q: Are output questions used for freshers? Yes, often as an early screen. Candidate-reported fresher sets lean on the easy and medium tiers.

Q: Do these change with React 19? Some do, batching, the use hook, and the compiler affect a few answers. Confirm version behavior on the official React docs before your round.

Q: What is the single most-missed concept? State batching with stale snapshots, per candidate-reported feedback.

React Output Questions 2026, 30 What-Will-This-Print Puzzles with Answers

PapersAdda 2026 Placement Cycle