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

> Discover TSX in React, merging TypeScript's type safety with JSX for robust component development. Learn how TSX enhances your React projects.

- Repository: [Meta/react](https://github.com/facebook/react)
- Tags: deep-dive
- Published: 2026-02-16

---

**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`](https://github.com/facebook/react/blob/main/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:

```tsx
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:

```jsx
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:

```js
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`](https://github.com/facebook/react/blob/main/useMemo-simple.tsx)**: Validates memoization logic with typed props and generic hooks
- **[`type-provider-store-capture.tsx`](https://github.com/facebook/react/blob/main/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`](https://github.com/facebook/react/blob/main/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.