React Hooks 超初心者編(useEffect) - フリーランス　技術調査ブログ

useEffectとは

useEffect フックを componentDidMount と componentDidUpdate と componentWillUnmount がまとまったものだと考えることができます。

https://ja.reactjs.org/docs/hooks-effect.html

componentDidMount()とは

コンポーネントがマウントされた（ツリーに挿入された）直後に呼び出されます。DOM ノードを必要とする初期化はここで行われるべきです。リモートエンドポイントからデータをロードする必要がある場合、これはネットワークリクエストを送信するのに適した場所です。 https://ja.reactjs.org/docs/react-component.html#componentdidmount

componentdidupdate()とは

更新が行われた直後に componentDidUpdate() が呼び出されます。このメソッドは最初のレンダーでは呼び出されません。コンポーネントが更新されたときに DOM を操作する機会にこれを使用してください。現在の props と前の props を比較している限り、これはネットワークリクエストを行うのにも適した場所です（たとえば、props が変更されていない場合、ネットワークリクエストは必要ないかもしれません）。 React.Component – React

サンプルコード

useEffectの記述はいくつも指定できる。
useEffect(() => {console.log('This is like componentDidMount')},[])のように第２引数に[]を指定すると初回描画のみ実行される
useEffect(() => {console.log('This callback is for name only.')},[name]) はnameの値が変わった時だけ実行される

import React, { useEffect, useState } from 'react';

const App = props => {
  const [state, setState] = useState(props)
  const { name, price } = state
 
  useEffect(() => {
    console.log('This is like componentDidMount or componentDidUpdate')
  })
  
  useEffect(() => {
    console.log('This is like componentDidMount')
  },[])

  useEffect(() => {
    console.log('This callback is for name only.')
  },[name])

  return (
    <>
      <p>現在の{name} は,{price}円です。</p>
    <button onClick={() => setState({ ...state, price: price + 1 })}>+1</button>
    <button onClick={() => setState({ ...state, price: price - 1 })}>-1</button>
    <button onClick={() => setState(props)}>Reset</button>
    <input value={name} onChange={e => setState({...state, name: e.target.value })}/>    
    </>  
  )
}

App.defaultProps ={
  name: '',
  price: 1000
}

export default App;

おまけ

下記のコースを購入して覚えると習得が容易にできると思います。独学だけだと限界がある人はこちらがお勧めです。 - React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！ https://www.udemy.com/course/react-hooks-101/

上記のソースは下記のgithubで確認できます。 https://github.com/DiveIntoHacking/react-hooks-101