Breathnote
Material-UIとreact-springの併用でエラー(Cannot update a component ForwardRef Modal ...)

Material-UIとreact-springの併用でエラー(Cannot update a component ForwardRef Modal ...)

Next.js × Material-UI × react-springでモーダルを作っていた時に遭遇したエラーです。

Material-UIのデモをコピペしただけなんですけどね。

ちなみに公式のサンドボックスでも同じエラーが出てました。

エラー内容

shell
Warning: Cannot update a component (`ForwardRef(Modal)`) 
  while rendering a different component (`ForwardRef(Fade)`).

To locate the bad setState() call inside `ForwardRef(Fade)`
  follow the stack trace as described in https://reactjs.org/link/setstate-in-render

解決法

私の場合は、react-springのバージョンをv8からv9にアップデートしたら消えました。

shell
yarn add react-spring@next

パッケージ名だけだとv8がインストールされるので、@nextで明示的にv9をインストールしましょう。