What Is TSX in React? A Complete Guide to TypeScript JSX Files

TSX files combine TypeScript's static type checking with JSX syntax, enabling compile-time validation of React components while maintaining the declarative UI markup that makes React development efficient.

When building modern React applications, developers often encounter files with the .tsx extension alongside traditional .js and .jsx files. Understanding what TSX in React represents is crucial for leveraging the full power of type-safe component development. In the facebook/react repository, TSX files serve as the foundation for the React Compiler's test suite, demonstrating how TypeScript-enhanced JSX drives robust, maintainable UI code.

Understanding TSX in React: TypeScript Meets JSX

TSX is the TypeScript equivalent of JSX. While JSX allows you to write HTML-like syntax within JavaScript, TSX extends this capability by adding TypeScript's static type system. This means every prop, state variable, and ref in your React components can be explicitly typed, catching potential bugs during compilation rather than at runtime.

In the React source code, TSX files are extensively used in the React Compiler test fixtures. For example, the file compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple.tsx demonstrates how typed components interact with the compiler's memoization logic.

TSX vs JS vs JSX: Key Differences

The distinction between these file extensions determines what language features and safety guarantees are available during development.

Extension	Language Core	JSX Support	Type Checking	Typical Use
.js	Plain JavaScript	No	None – runtime only	Small scripts, utilities, or legacy components without JSX.
.jsx	JavaScript with JSX syntax	Yes	None – lint-time only	Quick prototypes or projects using PropTypes instead of TypeScript.
.ts	TypeScript (no JSX)	No	Full compile-time	Libraries, utilities, or hooks that don't render JSX elements.
.tsx	TypeScript + JSX	Yes	Full static analysis	Modern React components requiring type-safe props and state.

As implemented in the facebook/react repository, TSX files power the React Compiler's validation suite, ensuring that type-rich components compile correctly while maintaining runtime performance optimizations.

Practical TSX Examples from the React Source Code

Typed Functional Components

The following example demonstrates a type-safe React component using TSX syntax, similar to patterns found in the React Compiler test suite:

import React, { FC, useState } from 'react'

type CounterProps = {
  /** Initial value for the counter */
  start?: number
}

/** A typed counter component */
export const Counter: FC<CounterProps> = ({ start = 0 }) => {
  const [count, setCount] = useState<number>(start)

  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  )
}

In this TSX file, CounterProps defines a strict shape for the component's props, while useState<number> guarantees the state variable remains numeric. The JSX markup is parsed together with TypeScript code, catching mismatched tags or incorrect prop types during compilation.

Comparison with JSX

The equivalent JSX version lacks compile-time type guarantees:

import React, { useState } from 'react'

export const Counter = ({ start = 0 }) => {
  const [count, setCount] = useState(start)

  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  )
}

Without TypeScript, prop validation relies on runtime checks or external tools like PropTypes, shifting error detection from build time to execution time.

Plain JavaScript Alternative

A standard .js file contains neither JSX nor TypeScript:

function add(a, b) {
  return a + b
}
module.exports = { add }

This format provides no JSX support and no static type checking, making it suitable for utility functions but inadequate for React component development.

How TSX Powers the React Compiler

The facebook/react repository utilizes TSX extensively within the React Compiler's test infrastructure. The compiler, located in compiler/packages/babel-plugin-react-compiler, processes TSX files to verify that type-rich components optimize correctly.

Key test fixtures include:

• useMemo-simple.tsx: Validates memoization logic with typed props and generic hooks
• type-provider-store-capture.tsx: Tests type-provider interactions where the compiler captures and reasons about TypeScript types inside JSX
• error.todo-functiondecl-hoisting.tsx: Verifies error handling and hoisting semantics specifically for TSX constructs

These files demonstrate that TSX is not merely a developer convenience but a critical input for the React Compiler's static analysis, enabling the tooling to understand component boundaries, hook dependencies, and type constraints before generating optimized JavaScript.

Summary

• TSX files combine TypeScript's static type system with JSX markup, offering compile-time safety for React components.
• Unlike .js files (no JSX, no types) or .jsx files (JSX without types), TSX enforces type contracts for props, state, and refs during the build process.
• The facebook/react repository relies on TSX for the React Compiler's test suite, validating that typed components optimize correctly under the compiler's transformations.
• Modern React development favors TSX for non-trivial applications because it shifts error detection from runtime to compilation, improving maintainability and IDE support.

Frequently Asked Questions

What is the difference between TSX and JSX in React?

JSX is a JavaScript syntax extension that allows XML-like markup within JavaScript files, typically using the .jsx extension. TSX is the TypeScript equivalent that combines JSX with TypeScript's static type system, using the .tsx extension. While JSX provides runtime rendering capabilities, TSX adds compile-time type checking for component props, state, and event handlers, catching errors before execution.

Can I rename my .jsx files to .tsx without making changes?

Simply renaming a .jsx file to .tsx will likely cause TypeScript compilation errors unless the code already follows TypeScript conventions. You must add explicit type annotations for props, state, and function returns, and ensure that all imported modules have available type definitions. However, valid JavaScript is syntactically valid TypeScript, so files without JSX can often be renamed from .js to .ts with minimal changes, though .tsx specifically requires JSX type definitions to be available.

Does using TSX affect React runtime performance?

No, TSX files are transpiled to standard JavaScript before execution, so there is no runtime performance difference between components written in TSX versus JSX or JS. The TypeScript compiler (tsc) or build tools like Babel strip all type annotations during the build process, outputting plain JavaScript that React executes identically. The performance benefits of TSX manifest during development through faster debugging and fewer runtime errors, not during execution.

When should I use .ts versus .tsx extensions in a React project?

Use .tsx for any file that contains JSX markup, including React components, hooks that return JSX elements, or test files with JSX assertions. Use .ts for pure TypeScript logic without JSX, such as utility functions, type definitions, constants, or custom hooks that only manage state and logic without rendering elements. As a rule of thumb, if the file imports React and contains angle brackets (<div> or <Component />), it should use the .tsx extension to enable proper JSX type checking.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}