javascriptreactjsjsx

Delete `import React form 'react'` from components that don't need it(React 17 or higher)

I just noticed that in React 17 or higher we don't need to import react on top of each component so components like this:

import React from 'react'

export const Cmp = () => {
  return (
    <span> Text </span>
  )
}

can become this:

export const Cmp = () => {
  return (
    <span> Text </span>
  )
}

so here is my question: when upgrading some react project from below react-17 to react-17 or higher how can I tarnsoform all of my components and remove all unnecessary react import?

Solution

  • I found a solution myself just take a look at this post https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports