React Curriculum

JSX Compilation & Modern JSX Runtime

Easy100% Free~25 mins#react#jsx#jsx-runtime#create-element#security#symbols

Interview Answer (30-Second Summary)

JSX is syntactic sugar that compilers transpile into createElement or modern jsx-runtime function calls, returning plain JavaScript element objects marked with a unique Symbol($$typeof) security tag.

Key Learning Objectives

✓

Understand how JSX compiles to React.createElement and the modern react/jsx-runtime.

✓

Explain the anatomy of a React element object: type, props, key, and $$typeof.

✓

Articulate why React elements use Symbol(react.element) to prevent XSS object injection.

✓

Predict runtime execution values of transpiled JSX code.

The Interview Problem & Context

What is logged to the console when the following simulation inspecting a modern JSX transpiled element executes?

1// Simulating the modern JSX runtime output
2const REACT_ELEMENT_TYPE = Symbol.for('react.element');
3
4function jsx(type: string, props: Record<string, any>) {
5  return {
6    $$typeof: REACT_ELEMENT_TYPE,
7    type,
8    props,
9    key: null,
10    ref: null,
11  };
12}
13
14// Equivalent to: <div className="card">Hello</div>
15const element = jsx('div', { className: 'card', children: 'Hello' });
16
17const typeOfElement = typeof element;
18const typeOfSymbol = typeof element.$$typeof;
19const isReactElement = element.$$typeof === Symbol.for('react.element');
20const nodeType = element.type;
21
22console.log(`${typeOfElement} ${typeOfSymbol} ${isReactElement} ${nodeType}`);

Predict Console & Render Output

object symbol true div

function symbol false div

object string true div

element symbol true HTMLDivElement

Execution Trace

Step 1 of 3 (Line 2)

Initializes REACT_ELEMENT_TYPE symbol via Symbol.for.

Component / Call Stack

Global Execution Context

Hook State & Scope

REACT_ELEMENT_TYPE:Symbol(react.element)

Console Output(No console logs emitted)

Deep Architectural Explanation

Anatomy of JSX Compilation

JSX is not valid ECMAScript. Browsers cannot execute JSX directly. Compilers like Babel and SWC transform JSX syntax into JavaScript function calls:

Legacy Transform vs Modern JSX Runtime

Pre-React 17: Transpiled to React.createElement('div', props, ...children). Required import React from 'react' at the top of every file.
React 17+ Modern Transform: Transpiled to import { jsx } from 'react/jsx-runtime'. React no longer needs to be in scope for JSX.

The Security Role of `$$typeof: Symbol.for('react.element')`

A crucial FAANG interview question is: Why does React need $$typeof?

If your server has an XSS vulnerability where user input is stored as raw JSON, an attacker could try to inject a fake React element object into client state:

json

{
  "type": "span",
  "props": { "dangerouslySetInnerHTML": { "__html": "<script>steal()</script>" } }
}

Since JSON cannot serialize JavaScript Symbol values, any JSON-injected payload will lack a valid Symbol.for('react.element'). React checks for this symbol and refuses to render forged objects, shutting down this vector!

Common Interview Traps & Pitfalls

Believing JSX is native browser HTML or directly parsed by the browser DOM engine.

Thinking import React is still required in every file in React 17+.

Assuming React elements are DOM nodes rather than lightweight immutable object representations.

Senior Interviewer Follow-Up Probes

How does React 19 change the way ref is handled on JSX element objects compared to React 18?

What happens if a browser does not support Symbols and React falls back to a number for $$typeof?

How does the new React Compiler leverage JSX AST nodes to insert memoization caches automatically?

Frequently Asked Interview Questions

Why was the new JSX transform introduced in React 17?

To remove the requirement of importing React in every file, reduce bundle size through dedicated runtime entry points, and enable future compiler optimizations.

What is the purpose of $$typeof in a React element object?

It is a security mechanism using Symbol.for("react.element") to verify that the element was created by React and not injected as a malicious plain JSON object from a compromised API.

What is the difference between a React Element and a Component?

A component is a function or class that accepts props and returns elements. An element is a plain object describing what DOM node or component should be rendered.

Can props on a React element be modified after creation?

No, React elements are immutable. To render something different, you create a new element tree by triggering a state update.

How does React handle children passed in JSX?

Children are placed on props.children as either a string, a single element object, or an array of elements if multiple children are nested.

Previous: React Mental Model & The Declarative Paradigm Next: Components, Props & Children Composition