Should I use .jsx or .tsx for React components?

Use .tsx if your project uses TypeScript. Use .jsx if your project uses plain JavaScript. In new projects, TypeScript (.tsx) is the recommended choice for better tooling, autocomplete, and type safety.

JSX vs TSX

Q: What is the difference between JSX and TSX?

JSX (.jsx) is JavaScript XML — a JavaScript file that contains JSX syntax for React components. TSX (.tsx) is the TypeScript equivalent — a TypeScript file that also contains JSX syntax. The core difference is that .tsx files use TypeScript, so component props and state must be typed.

What the file extensions mean, how they differ, and when to use each.

The Short Answer

.jsx — JavaScript + JSX

A JavaScript file that contains JSX syntax. Used in React projects that don't use TypeScript. Props have no type checking.

.tsx — TypeScript + JSX

A TypeScript file that contains JSX syntax. Used in React projects that use TypeScript. Props are typed interfaces or types.

Both files produce the same runtime output. The difference is purely at development time — TypeScript adds type checking to .tsx files.

Side-by-Side Code Comparison

Button.jsx (JavaScript)

// No type checking on props
function Button({ label, onClick, disabled }) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className="btn"
    >
      {label}
    </button>
  );
}

export default Button;

// No error if you pass wrong types:
<Button label={42} onClick="not a function" />

Button.tsx (TypeScript)

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

function Button({ label, onClick, disabled }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className="btn"
    >
      {label}
    </button>
  );
}

export default Button;

// Compile-time errors:
<Button label={42} />          // ✗ number not string
<Button onClick="not a fn" />  // ✗ string not function

File Extension Rules

Extension	Contains JSX?	TypeScript?	Use for
.js	No	No	Plain JavaScript utilities, logic
.ts	No	Yes	TypeScript utilities, non-UI logic
.jsx	Yes	No	React components in JavaScript projects
.tsx	Yes	Yes	React components in TypeScript projects

Common Questions

Can I use JSX in a .tsx file?

Yes — .tsx files support JSX syntax. That is the point of the extension. You write JSX plus TypeScript types in the same file.

Can I rename .jsx to .tsx without any other changes?

Usually yes for simple components, but TypeScript will require you to add types to props. The compiler will show errors for untyped function parameters — add an interface or inline types to fix them.

Does Next.js use .jsx or .tsx?

Next.js supports both. New projects created with create-next-app default to .tsx files when TypeScript is selected. Page files, components, and API routes all use .tsx.

Is .jsx still used in new projects?

Less and less. Most new React projects in 2024 use TypeScript by default and therefore .tsx files. .jsx remains in older codebases and tutorials targeting JavaScript beginners.

Can I write TypeScript in a .jsx file?

No. .jsx files are processed as JavaScript with JSX syntax. TypeScript type annotations in .jsx files will cause errors. Use .tsx for React components with TypeScript, .ts for non-JSX TypeScript files.

Does using .tsx affect performance?

No. The .tsx extension is a compile-time signal for the TypeScript compiler. It produces identical JavaScript output to .jsx. There is zero runtime performance difference.

When should I use .tsx vs .ts?

Use .tsx when the file contains JSX syntax (<Component /> or HTML-like tags). Use .ts for TypeScript files without JSX: utility functions, types, hooks that return non-JSX values, API clients, and configuration files. Using .tsx everywhere works but is unconventional.

What is the difference between JSX and TSX in terms of syntax?

.jsx files contain JavaScript with JSX syntax. .tsx files contain TypeScript with JSX syntax. The only syntactic addition in .tsx is TypeScript type annotations. A valid .jsx file is valid .tsx — TypeScript is a superset of JavaScript.

From the blog

View all →

Convert HTML to JSX/TSX syntax automatically?

Use the HTML to JSX Converter →