react v15 -> v16へマイグレーション　 #JavaScript

react v15.6.2 -> v16.13.1
react-dom v15.6.2 ->v16.13.1
react-router v3.0.3 -> v5.2.0
react-router-dom 5.2.0(追加)
styled-components v2.3.2 -> v5.1.1
react-responsive v2.0.0 -> v8.1.0
react-document-meta -> react-helmet(変更)
history v3.0.0 -> v5.0.0
react-slick ->v0.27.1

react

`componentWillReceiveProps`が廃止予定

今後削除される機能なので、ロジックを組み直したり, componentDidUpdateに置き換えたりなどの対応が必要です。
今回は急ぎなので、UNSAFE_componentWillReceiveProps に置き換えます。
componentWillReceivePropsと機能は同じです。後ほどリファクタリングします..!

- componentWillReceiveProps(nextProps) { ...
+ UNSAFE_componentWillReceiveProps(nextProps) {

`componentWillMount`が廃止予定

componentWillReceivePropsと同様です。こちらもUNSAFE_componentWillMount()にしてあとでリファク(

- componentWillMount() { ...
+ UNSAFE_componentWillMount() {

また、自分のコードでcomponentWillMount等の廃止予定ライフサイクルメソッドを使っていなくても、依存パッケージ内で使用されている場合がある。
その場合はパッケージをアップデートするか、アップデート対応していない場合はパッケージの入れ替えを行なった。

ルーティング

Link

Linkコンポーネントは react-routerからreact-router-domへ移動されたので、
import元を全て書き換えます。

- import { Link } from 'react-router'
+ import { Link } from 'react-router-dom'

browserHistoryの廃止

v4からbroserHistoryが廃止になっているので、置き換えが必要になります。

- <Router history={browserHistory}>
-  ...
- </Router>
+ <BrowserRouter>
+  ...
+  </BrouserRouter>

- const hashLocation = browserHistory.getCurrentLocation().hash.replace('#', '')
- const hashLocation = this.props.location.hash.replace('#', '')

子コンポーネントでlocationやhistoryを使いたい場合(propsで渡って来ない場合）は、
react-routerがhooks対応しているのでそちらを使えばバケツリレーにならずスッキリかけます。

- import React, { Component } from 'react'
- class Breadcrumb extends Component {
- componentDidMount() {
-   this.props.dispatch(breadcrumb(browserHistory.getCurrentLocation().pathname));

+ import React, { useEffect } from 'react'
+ const Breadcrumb = (props) => {
+  const location = useLocation()
+  useEffect(() => {
+   props.dispatch(breadcrumb(location.pathname))
+  }, [])

react-routerのhooksに関しては、下記の記事がわかりやすかったです。
React RouterがHooks対応したので使い方を整理する

store.jsx

import { history } from './user'

export default function configureStore(initialState) {
...

sagaMiddleware.run(rootSaga, { history })

styled-components

extend -> styled()

extendはv4から廃止されていたので、styled(Comp) の表記に統一します。

- const ButtonTertiary = Button.extend`
- ...
- `
+ const ButtonTertiary = styled(Button)`
+ ...
+ `

injectGlobal -> createGlobalStyle

injectGlobalというグローバルのCSSの記述が、v4からcreateGlobalStyleというAPIに取って代わられています。

- injectGlobal`
-@font-face {
-   ...
+ export const GlobalStyle = createGlobalStyle`
+ @font-face {
+  ...

react-router-scroll

SPAでは何らかの処理をしない限り、ページ遷移後もスクロールの位置が先頭に戻らない。
今回アップデートしたプロジェクトでは、 react-router-scrollが使われていた。
しかし、3年前から更新がかかっていない...
自分で実装した方が早いと判断し、パッケージを捨てることにする。

- import { useScroll } from 'react-router-scroll';
+ import ScrollTop from './containers/ScrollTop'

ルーティング部分

 <BrowserRouter>
    <ScrollTop>
      <Switch>
        <Route exact path="/" component={Top} />
      </Switch>
    </ScrollTop>
 </BrowserRouter>

ScrollTop.jsx

import { useEffect } from 'react'

export default function ScrollTop(props) {
  useEffect(() => {
    window.scrollTo(0, 0)
  }, [props.location])
  return props.children
}

実はredux周りなんかも入れたらもっと膨大な作業になりました...
こまめなアップデート、目指していきたいです!

参考資料

Styled Components v4について
 [React]react-router v4で画面遷移時に前のページのスクロール位置が残る

react v15 -> v16へマイグレーション