Reactの基本文法③～useEffect(副作用フック)の使い方～

今回はuseEffect(副作用フック)について学習する。

これ結構、ワカラナイｗｗ(説明の日本語が意味不明ｗ)

useEffect(副作用フック)とは？

React Docに、副作用フックの説明が書いてあって、

副作用(effect)フックにより、関数コンポーネントないで副作用を実行することができるようになります

って書いてあるけど、もう「副作用」の意味が分からないｗｗ

なんやねん。

とりあえず、やってみよう。

インポート

インポートして、useEffectを使うよ！を宣言。

import { useEffect } from 'react';

使いどころ

• レンダリングされたタイミングで実行したい処理があるとき
• 最初のレンダリングの際にのみ実行したい処理があるとき
• 特定のstateの更新の際に、再レンダリングされるときに実行したい処理があるとき

構文

useEffectの第1引数に実行したい関数、第2引数に依存する値(その値が変わったときに関数を実行する)を設定する。

// 1. レンダリングされたタイミングで実行
useEffect(() => {
  console.log('useEffectの関数がコールされた');
});

// 2. 初回レンダリング時のみ実行
useEffect(() => {
  console.log('useEffectの関数がコールされた');
},[]);

// 3. state更新時の再レンダリング時に実行
useEffect(() => {
  console.log('useEffectの関数がコールされた');
},[count]);

下記のクリックするとクリック数が表示されるコードを例にすると、1. はレンダリングのたびにコンソールに文字列が表示。

2. は、画面をリロードした際に1回だけコンソールに文字列が表示される。

3. は、クリックのボタンを押してcount の数値が上がっていくたびに、コンソールに文字列が表示される。

全体像はこんな感じ

3つ目のパターン(countが更新されるたびにコンソールに文字列が表示されるバージョン)

import './styles.css';
import { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const [arr, setArr] = useState([]);

  useEffect(() => {
    console.log('useEffectの関数がコールされた');
  }, [count]);

  const handleCountUp = () => {
    const arrCount = count + 1;
    setCount(arrCount);
    const newArr = [...arr];
    newArr.push(arrCount);
    setArr(newArr);
  };
  const handleResetCount = () => {
    setCount(0);
    setArr([]);
  };

  return (
    <div id="App">
      <h1>React useState動作確認用</h1>
      <div id="use_state01">
        <h2>{count}</h2>
        <button onClick={handleCountUp}>
          ここをクリックするとカウントされます
        </button>
        <button onClick={handleResetCount}>カウンタリセット</button>
      </div>
      <div id="use_state02">
        <p>
          <br />
        </p>
        <p>クリックしてカウンタが更新されると配列が更新されます</p>
        {arr.map((val) => (
          <h2 key={val}>{val}</h2>
        ))}
      </div>
    </div>
  );
}