useEffectについて知る

はじめに

useMemoを記事にして、自分の中でhooksについて再確認しようということで今回はuseEffectについて記事を書いていこうと思います。
未熟な身ですが、一生懸命わかりやすい文章を残せるよう努力いたしますので、お暇なとき一瞥していただければ幸いに思います。
また記事内で間違えた記述や誤植があればご指摘いただけると嬉しく思います。

useEffectとは

React公式ドキュメントによると
「 useEffect is a React Hook that lets you synchronize a component with an external system. 」
と記述されています。
意訳すると「コンポーネントと外部のシステムを同期させるために用いる。」とのことです。

データの取得やDOM操作、タイマー設定などレンダリングに関係しない副作用を実行するために用います。

特徴

useEffect(setup, dependencies?)

第一引数には実行したい処理、第二引数には依存させたい値を入れておきます。

1.初回レンダリング時にsetupの処理が実行される。

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

export const HelloEffect = () => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    console.log('Hello, useEffect')
  },[])

  return (
    <div>
      <div>
        {counter}
      </div>
      <button onClick={() => setCounter(prev => prev + 1)}>カウントアップ！</button>
    </div>
  );
}

一度Hello, useEffectを出力した後、ボタンを押してレンダリングさせても2度出力されることはありません。

2.第二引数の依存配列(dependencies?)が変化した場合に、setupが再実行される。

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

export const HelloEffect = () => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    console.log('Hello, useEffect')
    },[counter])

  return (
    <div>
      <div>
        {counter}
      </div>
      <button onClick={() => setCounter(prev => prev + 1)}>カウントアップ！</button>
    </div>
  );
}

ボタンを押してcounterを更新するたびにHello, useEffectが出力されます。

3.クリーンアップ関数の実行

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

export const HelloEffect = () => {
    const [counter, setCounter] = useState(0)
    useEffect(() => {
        console.log('Hello, useEffect')
// クリーンアップ関数
        return (() => {
            console.log('Bye')
        })
    })
  return (
    <div>
        <div>
            {counter}
        </div>
        <button onClick={() => setCounter(prev => prev + 1)}>カウントアップ！</button>
    </div>
  )
}

コンソールを確認しながらボタンを押すと再レンダリングする際にByeと表示されることが確認されると思います。
またクリーンアップ関数は、コンポーネントがアンマウントされる際にも実行されます。
ユースケースとしてはイベントリスナーや外部ライブラリのクリーンアップなどになると思います。

まとめ

簡単で拙い文章かとは思いますが、ここまで読んでいただいてありがとうございます。今後も少しずつ投稿し知見を深めることができればと思いますので、ご協力および見守っていただければ幸いです。

参考文献

[useEffect-React] https://react.dev/reference/react/useEffect