import React from 'react'は必要ない

React 17になってお決まりのimport文が要らなくなっていたことを今更ながら知ったので、記事として残しておきます。

変更について

以前までのコードではimport React from 'react';が必須でした。

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

しかしReact 17以降ではJSXの変換の仕組みが変更されており、import React from 'react';は必要なくなっていたようです。あっても普通に動作するため、あまり気にしていませんでした。

「以前はJSXをReact.createElementへとコンパイルしていたが、React.createElement では行えないパフォーマンス向上と単純化方法が存在するため、新しい JSX トランスフォームを採用した」とのことです。

詳しくは公式ドキュメント(公式のブログ記事)を参照して下さい。

どう対応すればいいか

書いたコンポーネント自体を書き換える必要はないとのこと。つまりimport文を削除できるようになりましたよ、というだけの話です。

ちなみに公式ブログには以下のようにも書いてあります。

セットアップによっては、コンパイル後のバンドルサイズをわずかに改善できる可能性があります。

具体的にどれほど改善されるかは書いていませんが、「わずかに」なのでわずかなのでしょう。

import文を削除したい場合は自動化スクリプトも用意されているようです。

ライブラリをバージョンアップしていれば、新しいトランスフォームを自動で利用してくれます。

ですからこれから立ち上げるプロジェクトでは気にする必要はありません。

補足

useStateやuseEffectは今まで通りimportが必要です。