What's Your IQ

QUESTION 1 / 15 · RENDERING & JSXMedium

What appears on screen when items is empty?

function List({ items }) { return <div>{items.length && <p>Has items</p>}</div>;}

What this React test measures, in short

This test checks whether you understand how React actually renders: what JSX outputs, why state is a snapshot per render, when effects and their cleanups run, why refs don't trigger renders, what the Rules of Hooks protect, and how keys and memoisation affect what updates.

Questions use function components and hooks (React 18 and 19). Class components and specific frameworks like Next.js aren't covered. The questions are our own and not standardised, so treat the result as a knowledge check, not a certification.

By What's Your IQ · Reviewed 4 Oct 2026

Format: 15 questions on what renders or logs, 4 options each
Topics: Rendering and JSX, state, effects, hooks and refs, lists and performance
Assumes: Comfortable JavaScript (closures, array methods)
Library: Created at Facebook by Jordan Walke; open-sourced 2013

QUESTIONS 4 AND 5, LIVE

Same three calls, different answers

State is a snapshot: inside one render, count never changes. React queues your updates and processes them before the next render. Click each button and watch the queue.

// this render: count = 0setCount(count + 1);setCount(count + 1);setCount(count + 1);

count0

LAST CLICK'S QUEUE

Click the button to queue updates

Each call reads the same snapshot, so they all ask for the same value. The counter only goes up by one per click.

// this render: count = 0setCount(c => c + 1);setCount(c => c + 1);setCount(c => c + 1);

count0

LAST CLICK'S QUEUE

Click the button to queue updates

Each updater gets the result of the one before it, so all three increments land. Use this form whenever the next state depends on the previous one.

COMMON REVIEW COMMENTS

It renders, but it'll bite you later

FRAGILE

const [items, setItems] = useState([]);const [total, setTotal] = useState(0);useEffect(() => { setTotal(items.reduce((s, i) => s + i.price, 0));}, [items]);

IDIOMATIC

const [items, setItems] = useState([]);const total = items.reduce( (s, i) => s + i.price, 0);

If a value can be calculated from props or state, calculate it during render. Syncing it with an effect costs an extra render and can drift out of date.

UI = f(state)the idea behind ReactDescribe what the screen should look like for any state, and let React work out the DOM changes. Every question here is a consequence of that model.¹

2011 → 2013From Facebook's news feed. Jordan Walke built an early prototype; React was open-sourced at JSConf US in May 2013, to a sceptical reception over JSX.¹

2019 · 16.8Hooks. useState and useEffect let function components hold state and side effects, and class components became optional.²

2022 · 18Concurrent rendering. Automatic batching everywhere, transitions, and Strict Mode's double-run of effects in development.³

2024 · 19Actions and the compiler. Form Actions and new hooks arrived, alongside the React Compiler, which memoises automatically.³

Honeypot. (2023). React.js: The documentary.
React Team. (2019). React v16.8: The one with hooks. React Blog.
React Team. React 18 and React 19 release posts. react.dev.

Where to go next

JavaScript testStale closures are a JavaScript problem first. Shore up the closures and event loop questions.

TypeScript testMost React codebases are typed. Generics and narrowing come up in every props interface.

All programming testsTwelve languages and the other front-end frameworks.

Add one, three times. Why does it say 1?