hooks使いたくて React のバージョン上げたものの useState の 関数が動かなかったり useEffect がエラー出したりする人は react-hot-loader のバージョンを上げると動くかも

バージョン追随ちゃんとやっていないことがバレバレな記事だが同じアナにハマっている方もいらっしゃるかもしれないので共有。

先日React hooksが stable になった v16.8 がリリースされたが、ウキウキでバージョン上げて開発サーバを立ち上げたところ次のような症状が出た。

• useState の set関数が動かない

// 例: これの setCount が実行されてもエラーを出力することもなく、ただただ count が変わらない
const [count, setCount] = useState(0)

• useEffectが Cannot read property 'expirationTime' of undefined というエラーを出して死ぬ
• hooks使っているFunctionコンポーネントを classコンポーネントの中で使うと Hooks can only be called inside the body of a function component と怒られて死ぬ

原因としては react-hot-loader のバージョンが低いことだった。
READMEに書いてある通り v4.6.0 以上では特に何も設定せずとも hooks が動くみたい。

[React Hooks] Incompatibility with react-hot-loader
https://github.com/gaearon/react-hot-loader#react-hooks

それ未満の場合は次のような設定を加える必要があるそうです。

setConfig({ pureSFC: true });