useEffectを理解らせる。

はじめに

本ドキュメントでは、基礎的な用語の解説も踏まえつつ、useEffectに絞って解説する。

use〇〇とは

useStateやuseEffectはHook（フック）と呼ばれる、
コンポーネントからReactの機能を利用するための関数。

コンポーネント
画面を構成する部品。
顧客管理システムでいうと
「顧客一覧」「検索欄」「顧客詳細画面」等。

useEffect

useEffectは、画面が更新された後に、外部に関わる処理を実行するための仕組み。
ここで言う「外部」とは、Reactが直接管理していない仕組みを指す。

ex )

• 画面が表示されたらコンソールに文字を出す
• 入力した下書きをブラウザに保存
• 画面が開いている間だけタイマーを動作させる

公式では、この仕組みを「外部システムとの同期」と説明している。
React公式ドキュメント

コード例

👇画面表示後、コンソールに文字を出力するコード例

counter.tsx

import { useEffect } from 'react'

function App() {
  useEffect(() => {
    console.log('画面が表示されました')
  }, [])

  return <h1>こんにちは</h1>
}

👇表示される画面

画像は、画面が表示された後に開発者ツールでコンソールを開いたもの。
ログに「画面が表示されました」と出力されていることが読み取れる。

解説

useEffect(() => {

useEffectを宣言する。
() => { は引数を受け取らない関数の書き方。
この関数をuseEffectの第１引数として渡す。

console.log('画面が表示されました')

useEffectの第１引数の中身。
ブラウザの開発者ツールのコンソールに文字を出力する。

}, [])

}で渡した関数を閉じる。
今回は、console.logで文字を出力する関数を渡している。

[]はuseEffectの第２引数であり、今回は空。
このコンポーネントが初めて表示された後に実行し、
通常の再レンダリングでは再実行されないことを示す。

レンダリング
Reactが「画面に何を表示するべきか」を考えた後、画面にそれを表示すること。

再レンダリング
状態が変わった（ボタンが押された、入力内容が変わった）後、Reactが
「では何を画面に表示すべきか」を考え直し、必要な部分を表示しなおすこと。

第１引数 ・ 第２引数

関数に渡す値を「引数」と呼び、
１番目に渡す引数を「第１引数」、２番目を「第２引数」と呼ぶ。

function add(a: number, b: number){
    return a + b
}
add(1, 2)

👆このコードでは、1が第１引数、2が第２引数。
関数内ではそれぞれaとbとして受け取る。

useEffect(関数, [])

👆useEffectでは第１引数には実行したい処理を記述した関数を渡し、
　 第２引数には再実行するかの判断に使う値を入れた配列を書く。

第２引数の記法

第２引数は書き方が主に３つある。

1. 空の配列[]を渡す

useEffect(() => {
  console.log('画面が表示されました')
}, [])

先ほどの例はこれ。空なので、比較する値がない。
コンポーネントが初めて表示された後のみ実行し、通常の再レンダリングでは実行しない。

2. 変数を入れる

useEffect(() => {
  console.log('現在の回数:', count)
}, [count])

👆初めて表示された後と、変数（今回はcount）の値が変わった後に実行される。

useEffect(() => {
  console.log(name, count)
}, [name, count])

配列なので、変数を複数入れることも可能。
👆この場合はnameかcountのどちらかの値が変わると実行される。

3. 省略する

useEffect(() => {
  console.log('画面が更新されました')
})

初めて表示された後も、その後の再レンダリングの度に毎回実行される。

第２引数を省略すると無限ループを引き起こす場合がある。

const [count, setCount] = useState(0)

useEffect(() => {
  setCount(count + 1)
})

👆の場合、次の処理が繰り返される。

1. 画面が表示される
2. useEffectによりcountが１増える
3. state(今回はcount)が変わったので再レンダリングが起こる
4. useEffectがまた実行される
5. またcountが増える
   →３に戻る。

クリーンアップ関数

クリーンアップ関数は、タイマーの停止やイベント監視の解除等、
開始した処理を片付けるための関数。
アンマウント時に加え、第２引数の配列に入れた値が変わって処理を再実行する時にも、
その前に実行される。

第１引数に渡す関数の中でreturnする関数を指す。

ややこしい・・・。

アンマウント
表示していたコンポーネントを画面から片づけること。

useEffect(() => {
  console.log("表示された");

  return () => {
  // これがクリーンアップ関数
    console.log("片付ける");
  };
}, []);

useEffectを書いたコンポーネントが画面から消えた後、returnの関数が動く。

雑感

私はこれまで何度かuseEffectの学習に取り組み、その度に挫折してきました。
この記事が、皆さんの学習の一助となれば幸いです。