Reactはデータの変更を起因として画面が描画されます。

描画した後に何か処理を行いたい場合があります。
useEffectフック を使う事で描画後に行いたい処理を実行することができます。

描画後の処理

描画後に行う処理としては、描画とは関係ない処理を実行すると良いでしょう。例えば、WEB APIのような非同期処理はuseEffectを用いて実行する事が多いです。

useEffectの使い方

useEffect は関数を引数とします。描画後に行いたい処理を関数として useEffect へ渡します。この関数の事を 描画関数 と言います。

  const showLog = () => console.log(count + "回");

  useEffect(showLog)

useEffectの例

簡単な例を作成します。
今回はボタンを押すと、押した回数をログに出力するようにします。

コンポーネント

今回はAppコンポーネントのみ使用します。

Appコンポーネント

Appコンポーネントは以下の通りです。

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

function App() {

  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count + "回");
  })

  return (
    <>
    <button onClick={() => setCount(count + 1)}>ボタン</button>
    <div>{count}回</div>
    </>
  );
}

export default App;

ボタンを押下するとボタンを押下した回数を画面に表示します。その後コンソールログにてボタンを押下した回数を表示します。

最後に

特にありません。