DEV Community

loading...
Cover image for You don’t always need to import React

You don’t always need to import React

dance2die profile image Sung M. Kim Originally published at slightedgecoder.com on ・2 min read

r/reactjs has a Weekend Reads, which is a “‘book club’ type thing where we read something every weekend”.

Last week’s topic was JSX In Depth, and I would like to share something that’s been bothering me but learned why.

The question is “why do you import React” when “React” is not used anywhere in your component code?

🎶 Intro

When you start learning react, you might been told to always import React, import React from "React" in your component file.

But that’s not always necessary.

To understand why, let’s see what JSX is.

🤔 JSX?

The subtitle in JSX in Depth describes JSX as

Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function

You can either use the JSX syntatic sugar 🍬 to create components or use React.createElement directly if you are not transpiling your source code.

🙄 Then shouldn’t you import React everywhere?

No. not unless you use React object for your component.

You can create a “function” component that returns value(s) of a simple JavaScript primitives, such as string or number.

That is the full source for App.js.

In this case, React object is not used anywhere so you can leave out the import statement (but still is a valid component).

📒 Note: If you are creating a class component, you need to import React as it needs to extend React.Component.

And then you can import App.js just like any React component (Line #4).

👋 Parting Words

I hope this has solved for the need to import React for components.

99% of the time, you’d use React object in someway to create a component so probably a good idea to import React anyway
Forget about this...😅

🏔 Resources

The post You don’t always need to import React appeared first on Sung's Technical Blog.

Discussion (15)

pic
Editor guide
Collapse
regularfry profile image
Alex Young

So here's a question I honestly don't know the answer to: why isn't import React from "react"; inserted at the transpilation step from jsx to js? Why do we need to do this manually? For the case where all you're doing in the file is using jsx tags, the import is confusing and should be unnecessary.

Collapse
dance2die profile image
Sung M. Kim Author • Edited

Thanks Alex, that's a great question I haven't considered.

Inserting the import statement would require a babel plugin (babel-plugin-react-require or babel-plugin-auto-import, etc), which could relieve us from having to manually insert it where JSX is used.

I honestly didn't know "why" babel doesn't import it automatically so dug around a bit.

It's to prevent import name resolution errors according to following closed issues.

The gist is that, importing react automatically can clash with other imports already declared as "React" or when "React" is declared globally in your application (using "script" tag).

Collapse
karataev profile image
Eugene Karataev

Here's a dirty hack to avoid importing React in every file with JSX. Just add React to window before ReactDOM.render.

import ReactDOM from 'react-dom';
import React from 'react';
import App from './App';

window.React = React;
ReactDOM.render(<App/>, document.querySelector('#mount'));
Enter fullscreen mode Exit fullscreen mode

Now App.js works without throwing a React is not defined error.

// App.js 
export default function() {
  return <div>I am App!</div>
}
Enter fullscreen mode Exit fullscreen mode

This hack is just to illustrate React dependency management. Don't use it in the production code! 😄

Collapse
dance2die profile image
Sung M. Kim Author

Holy mate... Such a convinient hack... You spoiled me 😂

Tried here and worked

Collapse
budyk profile image
Budy

yeep that should do the trick :D, by putting React to the global window object

Collapse
amritraj789 profile image
Amrit Raj

Really Good Explanation.
Just wanted to add that starting from React 17 they have added support for the new JSX-transform. So if you remove the

import React from 'react'

statement for any functional component that returns even jsx (and not simple JS primitives), it will not throw the old

Uncaught ReferenceError: React is not defined

error.
You can read more about it here: reactjs.org/blog/2020/09/22/introd...

Collapse
dhnaranjo profile image
Desmond Naranjo

You haven't explained why this would be valuable. There's a lot of stuff I can do that I shouldn't. This seems like one of those stuffs.

Collapse
dance2die profile image
Sung M. Kim Author

You are right Desmond. I wasn't being so clear why it'd be valuable.

My intention was to share what I just learned - the need to import React when it's not used in your code.

So TL;DR should have been "because JSX is transpiled to React.createElement, which requires React to be in scope".

Collapse
jenessawhite profile image
Jenessa White • Edited

Thanks!
Wondering, if this can help clear up some 'unused variable warnings' even if I am using { useEffect } i don't need to also import react, right?

Collapse
dance2die profile image
Sung M. Kim Author • Edited

You're welcome, Jenessa.

Yes. You can.

Just check if the module isn't using JSX or other React.* methods such as "React.useEffect" (due to "unused variable warnings")

Collapse
httpjunkie profile image
Eric Bishard

Short and sweet! Thanks for the good read.

Collapse
dance2die profile image
Sung M. Kim Author

You're welcome & thanks for the feedback.

Learned a lesson from feedbacks what's lacking 😀

Collapse
juanfrank77 profile image
Juan F Gonzalez

And so if we now start to use Hooks avoiding the use of ES6 classes can we skip importing React altogether? hehe :D

Collapse
dance2die profile image
Sung M. Kim Author

Hooks methods such as useEffect, useState, etc are from React so one would still import from 'react' 😉.

Collapse
juanfrank77 profile image
Juan F Gonzalez

Yeah I figured that right after I hit "Submit" and I was like "meeehh I'm not going to edit that now" ahaha silly me