useEffectとは

useEffect(<callback function>,<dependency - optional>)

：フックを使用すると、コンポーネントでside-effectを実行できる。

　side-effectの例としては、データの取り込み、DOMの直接更新、タイマーなどがある。

　基本的にuseEffectは全てのrenderに反応をする。

　

useEffect(() => { })

App component

import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(1);
  const [name, setName] = useState("");

  const handleCountUpdate = () => {
    setCount(count + 1);
  };

  // renderする度呼ばれる
  useEffect(() => {
    console.log("rendering");
  });

  const handleInputChange = (e) => {
    setName(e.target.value);
  };

  return (
    <div>
      <button onClick={handleCountUpdate}>update</button>
      <span>count: {count}</span>
      <input type="text" value={name} onChange={handleInputChange} />
      <span>name: {name}</span>
    </div>
  );
}

export default App;

 

useEffect(() => { }, [value])

上記のケースはnameやcountにイベントが発生した時、いずれもuseEffectが起きる。

ということで、特定のstateに対してuseEffectを起こす場合は、useEffectの２番目の引数にstateを

追加すれば良い。例では、count buttonを押下する度にconsoleが出力される。

 

 

useEffect(() => { }, [])

２番目の引数に空きarrayが入る場合は、componentが最初マウントした時しかuseEffectが動かない！！