Automatic JSX Runtime

The Automatic JSX Runtime lets modern React tooling compile JSX without requiring `import React from 'react'` solely to make JSX work. The compiler transforms JSX into calls to runtime functions such as `jsx` and `jsxs` from `react/jsx-runtime`.

JSX is syntax that tooling transforms before JavaScript runs. Historically, JSX such as `<Button />` was commonly compiled into `React.createElement(Button)`, which meant the `React` identifier had to be in scope when that transformed code executed.

The Automatic JSX Runtime changes the generated code. Instead of relying on a `React` variable, the transform imports the appropriate helper functions from `react/jsx-runtime` (or the development runtime when applicable). This makes a React import unnecessary when a file only needs React for JSX syntax.

The feature is primarily a compiler or tooling behavior, not a different JSX language. Your source can still use JSX normally, while Babel, TypeScript, or another compatible build tool performs the transformation. The project must use compatible React runtime packages and compiler configuration.

This does not mean React itself is unnecessary. Components may still explicitly import React APIs such as `useState`, `useEffect`, or `memo`, and application code can still reference the `React` object when it actually needs that identifier. The distinction is that JSX compilation no longer requires the identifier merely because JSX appears in the source.

Key points

• JSX is transformed by build tooling before execution.
• The automatic runtime uses `react/jsx-runtime` helpers instead of requiring a `React` identifier for JSX.
• A file can contain JSX without `import React from 'react'` when the project is configured for the automatic runtime.
• The change affects JSX transformation, not whether React APIs must be imported when they are explicitly used.
• Compiler configuration and compatible React runtime packages must agree.

Interview questions

Why can you write JSX without importing React when using the automatic JSX runtime?

JSX is transformed by the build tool before the browser executes the code. With the automatic runtime, the transform generates imports for JSX helper functions instead of generating calls through a `React` variable. Therefore, an explicit React import is not required merely because the file contains JSX. You still import React APIs that you directly use.

What is the difference between the classic and automatic JSX runtimes?

The classic JSX transform typically lowers JSX into `React.createElement` calls, so `React` must be available in the module. The automatic runtime instead generates calls to helper functions provided by `react/jsx-runtime`. This removes the need for a React namespace import when JSX is the only reason React would otherwise be imported. Both approaches ultimately turn JSX into JavaScript operations that create React elements.

Does the automatic JSX runtime mean React no longer needs to be installed?

No. The automatic runtime changes how JSX is compiled; it does not remove React as a runtime dependency for a React application. The generated JSX code uses runtime helpers supplied by the React package, including the `react/jsx-runtime` entry point. Other React APIs also continue to require their normal imports when used directly.

How would you troubleshoot a project where JSX fails after removing React imports?

First, I would inspect the compiler configuration to determine whether JSX is being transformed with the automatic runtime or the classic runtime. I would then verify that the generated output references the expected JSX runtime entry point and that the installed React packages provide it. I would also check whether different tools in the build chain, such as TypeScript and Babel, disagree about the JSX setting. Finally, I would distinguish a JSX transformation problem from an unrelated missing import for an explicitly used React API.