Do You Still Need to Import React in `.tsx` Files?

Do You Still Need to Import React in .tsx Files?

If you're working with modern React and seeing something like:

React is declared but its value is never read

You’re not alone. This post clarifies when you actually need to import React, and why this warning often isn’t an error at all.

---

The Myth: "You must always import React"

In older versions of React (pre-17), importing React was essential:

import React from 'react';

That’s because JSX was transpiled into React.createElement() calls under the hood.

However, with React 17+ and the introduction of the new JSX transform, this is no longer required.

---

The Modern JSX Transform

React 17+ and TypeScript 4.1+ introduced a new way to compile JSX:

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

With this setting, JSX is compiled without requiring React in scope. So this:

const Hello = () => <h1>Hello</h1>;

Does not need:

import React from 'react';

And that’s why you're seeing the warning—you’ve imported React, but you're not actually using it. TypeScript is just letting you know.

---

What Should You Do?

✅ Option 1: Remove the Unused Import

Simply delete the unused import React from 'react'.

// ❌ Not needed
// import React from 'react';

// ✅ Modern React
const MyComponent = () => <div>Hello Modern React</div>;

✅ Option 2: Suppress the Warning (Not Recommended)

You can suppress unused imports, but this is not ideal in long-term codebases.

---

Real Example: TypeScript + React Setup

Here's a typical tsconfig.json for React 17+:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    ...
  },
  "include": ["src"]
}

As long as jsx: react-jsx is configured, you're good to go.

---

Common Misunderstanding

"But my project compiles fine—why the warning?"

✅ Because the JSX is valid, but the React import isn’t used anymore.

🧼 So clean up the import to silence the warning and embrace modern React.

---

Developer Insight

This change reflects React’s broader move toward simplicity and improved DX (developer experience):

• Less boilerplate in every file
• Easier onboarding for new developers
• Fewer things to "just remember" to include

---

TL;DR

Situation	Should you import React?
Pre-React 17	✅ Yes, always
React 17+ with react-jsx compiler	❌ No, not required
Seeing React is declared but unused	✅ Remove it

---

Conclusion

Modern React doesn’t need import React in every component. If you’re getting a “React is declared but never read” warning—it’s because your tools are smarter now.

Clean code is happy code. Remove unused React imports, configure your compiler correctly, and enjoy writing leaner, faster React apps.

---

Tags: react typescript eslint frontend jsx webdev