ComponentDidMountをuseEffectで代用する方法

React.jsでcomponentDidMountをUseEffectで代用する方法を紹介します。

componentDidMountをUseEffetctで代用する方法はとても簡単です。 例えば、下記のようなcomponentDidMountは、空のtitleをstateにもち、componentDidMountで（componetがmountされた時に）titleに値を入れて、それをrenderするような例です。

import React, { Component } from 'react'

class Home extends Component {

  state = { title: ''}

  componentDidMount() {
    this.setState({title: 'component did mount'});
  }
  render () {
    return (
      <h1>{this.state.title}</h1>
    )
  }

}
export default Home

これをuseEffectで表示するとこうなります。

import React, { useState, useEffect } from 'react'
const Home = () => {
  const [title, setTitle] = useState('')

  useEffect(() => {
    setTitle('useEffect title')
  }, [])

  return (
    <h1>{title}</h1>
  )
}
export default Home

ポイントは useEffect(() => { }, [])の[]の部分です。これをuseEffectの第二引数に渡すことで、 更新時には更新されずに無限ループのようにひたすら更新し続けられるというのを避けることができます。

そもそも、第二引数の値が更新（変更）された時に、useEffectが利用されるような仕様になっています。 今回、[]と空でかつ定数の配列を渡しているので、更新されずに最初の一度のみ実行されます。

それにより、componentDidMountと同じような動作をこれをやることで可能となってきます。

参考: useEffectのAPI

参考: how-to-do-componentdidmount-with-react-hooks

参考: react-useeffect-hook-componentdidmount-to-useeffect