Study notes · 8% of the exam

JSX, Props and Composition

JSX is a description of UI, not the UI itself. Know what each value renders, how props are assembled, and the pitfalls of controlled inputs, children utilities, events and React 19's new DOM features.

Key points

1
JSX compiles to jsx(type, props) calls that build plain element objects; components run later, when React renders them, so never call a component as a function.
2
Props are assembled left to right like an object literal, so the last spread or attribute wins. key is never passed as a prop; in React 19 ref is.
3
null, undefined, true and false render nothing, but every number renders, so count && <X /> can print 0 or NaN.
4
An input is controlled when value is defined: it needs onChange, and value must never switch between undefined and a string.
5
Define components at module level. A component declared inside another is a new type every render and remounts with its state lost.
6
React events follow the React tree, so they bubble out of portals. Since React 17 they are delegated at the root and not pooled.
7
React 19 hoists <title>, <meta> and <link> into the head, dedupes stylesheets with precedence, and sets custom-element props as properties when possible.

Common traps

Destructuring defaults ignore null; only undefined triggers them, and defaultProps no longer works on function components in React 19.
Children.count and Children.map treat a fragment as a single child and count null and false, so Children-based APIs break easily.
cloneElement replaces handlers you pass instead of composing them, and dangerouslySetInnerHTML never sanitises.

Read the source

Test yourself on JSX, Props and Composition

Ten questions, with the answer and explanation after each one.