fourside.github.io

React18対応をしました

2022/04/19 13:00:00 +00:00

手元の個人プロジェクトで React を v18 にしました。やったことをメモします。

対応ライブラリのバージョンアップ

  • 手元で使っているだいたいのライブラリは18対応されていて、バージョンをあげるだけで問題なく動いた
    • storybook は alpha 版までっぽいので今は見送り
  • React DnD はバージョンアップに伴って ESM のみ提供することになったようなので、テストが動かなくなってしまった 
transformIgnorePatterns: ["/node_modules/(?!react-dnd)/"],
  • 分かりにくいんだけど、デフォルトで node_modules を無視する設定になっているところに、react-dnd だけ除外する正規表現
    • ignore リストに 否定先読みで除外する場合を追加するので、意味的に二重否定になっていて飲み込みにくかった
  • これを加えるとテスト実行がやたら遅くなる
    • 100件のテストケースで30秒ほどかかる
      • 対応前は no-cache で5秒前後
    • React DnD を使っていないテストでも遅くなるので、おそらく設定に起因する遅さ
      • 否定先読みが遅いのか、そもそも正規表現が遅いのかは分からない
    • --maxWorkers=50% を jest に与えるとやや速くなったけど焼け石に水感はある
  • jest の ESM 対応が進んでいるみたい

@types/react の breaking changes

callback の引数の型

  • うっかり忘れてても許されていたのが型エラーになりました。ちゃんと型を指定するだけ。

FC から children が取り除かれた

  • 暗黙的な children を扱えなくなりました
    • FC<Props> を FC<PropsWithChildren<Props>> に書き換えるだけ
    • そんなに数がないのでツールに頼らなくてよかった

VFC が deprecated になった

  • FC が VFC と同じ意味を持つようになった余波かな
  • 上述の変換ツールには VFC を書き換える機能がなさそうだった
    • 内部的に jscodeshift という meta 社の OSS を使っているようなので、それを使って単純な書き換えをするものを作ってみた
    • react_codemod_vfc_to_fc
      • VFC というトークンを見つけたら、問答無用で FC に書き換えていく
      • 厳密にやろうと思うと難しくて諦めました
        • function VFC を見つけたら function FC になってしまう
        • 書き換え対象は tsx だし（jscodeshift に指定するパーサは tsx ）コンポーネントにおいて VFC という変数や関数を定義することはほぼないので現実的に問題ないはず
fourside

Written by fourside