How to pass the Provyn React assessment

What the assessment tests

The React assessment is not about memorising API signatures. It is about knowing what React actually does: when it re-renders, what closures capture, how the reconciler decides what changes, and what rules the hooks runtime enforces. Every question has a trap for someone who learned React by copying examples.

The highest-weighted area is hooks ordering — understanding why hooks must not be called conditionally or inside loops, and what happens when they are. The second-highest is performance: knowing when memo and useCallback help (rarely) versus when they are wasted work (usually).

The hooks model

React tracks hook calls by position in the call stack. Call order must be identical on every render. The assessment will show a component that calls useState inside an if statement and ask what happens — the answer is not 'it might work sometimes'; it is 'React throws an error because the hook order changed between renders.'

useEffect dependencies are the most common source of bugs. An empty dependency array means the effect runs once on mount. A missing dependency means the effect captures a stale closure. A dependency that changes on every render (like an object literal) means the effect re-runs on every render. The assessment will test all three patterns.

Performance: memo, useMemo, useCallback

memo prevents re-renders when props are shallowly equal. It has a cost (the comparison) that outweighs the benefit unless the wrapped component is expensive to render. The assessment will ask you to identify whether memo is net-positive in a given scenario.

useCallback is for referential stability of functions passed to memoised children. If the child is not memoised, useCallback does nothing useful. Know this pattern: useCallback only helps when the receiving component uses memo or when the function is a useEffect dependency.

Three-day prep plan

Day one: run the practice assessment and note the hooks questions you got wrong.

Day two: build a custom hook from scratch — something like useFetch(url) that returns {data, loading, error} and handles cleanup (AbortController). This pattern appears in graded questions.

Day three: read the React 18 transition and Suspense docs. Know what startTransition does and when to prefer it over useState for expensive state updates.

Common point-losing mistakes

Calling setState inside useEffect without the right dependency array. This causes infinite render loops. The question will show the loop and ask what is wrong.

Not cleaning up effects. If useEffect subscribes to a WebSocket, the cleanup function must unsubscribe. Questions will ask what happens to a component that doesn't clean up when it unmounts — the answer is a memory leak or stale state update after unmount.

Using index as a key in a list. If the list order can change, using index as key causes React to reuse the wrong DOM nodes and produces wrong output. The assessment tests this with a reorderable list scenario.