Frozen objects, and why JSON can't fake an element
Assigning to a frozen element's props throws. JSON.stringify silently drops $$typeof because its value is a Symbol, and parsed JSON can only hold a string there, so isValidElement says false.
The compiler turns each JSX tag into a jsx() call (or createElement in the classic runtime) that returns a frozen plain object, a React element with type, props and key, marked with a $$typeof Symbol so that JSON data can never pass itself off as an element.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Without using any tags, build and render <p className="note">Saved <b>3</b> files</p> with jsx/jsxs from react/jsx-runtime.
Log the type, key and props of <Avatar key="u1" size={40} />, where function Avatar() { return null; }. Predict the output first.
Explain it without notes
What does the compiler turn <li key="a" className="x">Hi</li> into with the automatic runtime, and with the classic runtime?
What fields does a React element have, and what does each mean?
Why are React elements immutable, and how do you show something different?
What is $$typeof, and what attack does it prevent?
What is the difference between jsx and jsxs?
Preview
Console
Nothing logged yet.Expected console output
TypeError: Cannot assign to read only property 'className' of object '#<Object>'
title -> big
{"type":"h1","key":null,"props":{"className":"title","children":"Hello"},"_owner":null,"_store":{}}
symbol string
true false