Do you really need to import 'React' when creating hooks? (React-hooks)

Question

I saw the examples where https://reactjs.org/docs/hooks-custom.html they always do:

import React, { useState, useEffect } from 'react';

But React is not really used in the file, do we really need it and why?

I asked this question because I am encountering an issue with eslint saying:

'React' is defined but never used no-unused-vars - And I'm on create-react-app 3.0.1 which eslint is already included - (and I'm not sure how to fix this - already tried this and also tried adding it on package.json eslintConfig but still nothing)

Answer 1

React 17 has a new JSX transform which no longer requires the import (also backported to new versions 16.14.0, 15.7.0, and 0.14.10). You can read more about it here: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

// no import needed
const App = () => <div>hello!</div>

However, you still need to import to use hooks:

import { useState } from 'react'

const App = () => {
  const [stuff, setStuff] = useState('stuff')

  return <div>{stuff}</div>
}

The docs also link to a script to automatically update all of the files in a project to fix all of the imports. Personally, I was in the habit of just using the React.useWhatever form so I never needed to mess with the import statement, but using named imports can potentially reduce the final bundle size.

The docs say the named import is now the recommended way, so this is NOT recommended, but if you really want to keep the React import, you can set the below eslint rule to stop it from complaining. Note that this will continue to require it in all files.

"react/jsx-uses-react": "error"

Answer 2

You will need React if you are rendering JSX.

To avoid that eslint warning, you should use react-in-jsx-scope rule from eslint-plugin-react.

In that rule, it also explains why you need React in the file, even if you don't use it (you think you don't use it, but if you render JSX, you do).

When using JSX, <a /> expands to React.createElement("a"). Therefore the React variable must be in scope. If you are using the @jsx pragma this rule will check the designated variable and not the React one.

Answer 3

From the React official docs:

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

<MyButton color="blue" shadowSize={2}>Click Me</MyButton>

compiles into:

React.createElement(MyButton, {color: 'blue', shadowSize: 2},'Click Me' )

You can also use the self-closing form of the tag if there are no children. So:

<div className="sidebar" /> 

compiles into:

React.createElement('div', {className: 'sidebar'}, null )

https://reactjs.org/docs/jsx-in-depth.html

EDIT Hooks are also under the React namespace, React.useState ...etc