useEffectとは

useEffectとは

コンポーネントがレンダリングするとき実行するようにしてくれるhookです。
コンポーネントがmountされた時（最初現れた時）、unmountされた時（削除される時）、updateされる時（特定propsが変わる時）があります。

🖊レンダリングが完了した時実行

• componentDidMount & componentDidUpdate

useEffect(() => {
	// 実行する関数
});

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

const UseEffectTest = () => {
  const [count, setCount] = useState(0);
  const countUp = () => setCount(count + 1);

  useEffect(() => {
    console.log("useEffect!!", count);
  });

  return (
    <div>
      <p>{count} click</p>
      <button onClick={countUp}>Click Me</button>
    </div>
  );
};

export default UseEffectTest;

🖊最初レンダリングの時
jqueryの $( document ).ready(function() { } とにってます。

useEffect(() => {
	// 実行する関数
}, [空配列]);

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

const UseEffectTest = () => {
  const [count, setCount] = useState(0);
  const countUp = () => setCount(count + 1);

  useEffect(() => {
    console.log("useEffect!!", count);
  }, []);

  return (
    <div>
      <p>{count} click</p>
      <button onClick={countUp}>Click Me</button>
    </div>
  );
};

export default UseEffectTest;

🖊特定値が変更されるとき実行の場合

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

const UseEffectTest = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("GodDaeHee");
  const countUp = () => setCount(count + 1);
  const handleChangeName = (e) => setName(e.target.value);

  useEffect(() => {
    console.log("useEffect!!", count);
  }, [count]);

  return (
    <div>
      <p>Hello, my name is {name}</p>
      <input onChange={handleChangeName} />
      <p>{count} click</p>
      <button onClick={countUp}>Click Me</button>
    </div>
  );
};

export default UseEffectTest;