useEffectの使い方。第二引数で制御する[Reactの学習]

初心者さん

ReactのuseEffectってどんな機能なんだろう？

このような疑問をお持ちの方に向けて書いています。

useEffectはReact Hooksの一つです。関数コンポーネント内で実行することができます。

実際にuseEffectの使い方を紹介していきます。関数コンポーネントでは必須の機能なので使い方を理解しておくことをおすすめします。

▼この記事では、useEffectについて以下の点を理解できるよう解説していきます。

useEffectとは

useEffectは、関数コンポーネントで利用できるReact Hooksです。実際にどのような機能なのか解説していきます。

useEffectの特徴

useEffectは、以下のような特徴を持った機能です。

useEffectでクリーンアップを実行する

ネットワークリクエストの送信、手動での DOM 改変、ログの記録、といったものがクリーンアップを必要としない副作用の例です。
引用元: React公式

上記サイトで詳しく解説されていますが、メモリーリークをを発生させてしまうような場合は、クリーンアップを行う必要があります。

useEffectの基本構文

useEffectは、第一引数に処理記述、第二引数に依存する値を配列で記述します。

下の構文には空の配列が指定されています。その場合は、初回のレンダリング時のみ処理が実行されます。

useEffect(() => {
  // 処理
}, []));

useEffectの使い方

useEffectを実際に使い、APIからデータを取得する例で紹介していきます。

APIには、「JSONPlaceholder」というAPIのサービスを利用していきたいと思います。URLにリクエストを送るとデータを返してくれます。

useEffectの第二引数を空配列にする

JsonPlaceholderで100件のデータを取得するAPIを実行しています。第二引数に空配列を渡しているため、初回のみ実行されていることがわかります。

type Blog = {
  body: string,
  id: number,
  title: string,
  userId: number
}

export const Effect01: React.FC = () => {
  const [blogs, setBlogs] = useState<Blog[]>([])
  
  const handleGetBlogs = async () => {
    const result = await axios.get('https://jsonplaceholder.typicode.com/posts')
    setBlogs(result.data)
  }

  useEffect(() => {
    handleGetBlogs()
  }, [])

  return (
    <>
      {blogs.map(blog => {
        return <p key={blog.id}>{blog.title}</p>
      })}
    </>
  )
}

useEffectの第二引数に依存する値を指定する

countというstateを準備しました。ボタンをクリックするとcountが1プラスされます。

useEffectでは、第二引数にcountを指定しています。カウントアップbuttonをクリックするとcountの値が変化するため、useEffectの処理が実行されます。

type Blog = {
  body: string,
  id: number,
  title: string,
  userId: number
}

export const Effect02: React.FC = () => {
  const [blogs, setBlogs] = useState<Blog[]>([])
  const [count, setCount] = useState<number>(0)
  
  const handleGetBlogs = async () => {
    const result = await axios.get('https://jsonplaceholder.typicode.com/posts')
    console.log(result.data)
    setBlogs(result.data)
  }

  useEffect(() => {
    handleGetBlogs()
  }, [count])

  const blogsClear = () => {
    setCount(prevCount => prevCount +1)
  }

  return (
    <>
      <button onClick={blogsClear}>カウントアップ</button>
      {blogs.map(blog => {
        return <p key={blog.id}>{blog.title}</p>
      })}
    </>
  )
}

useEffectの使い方まとめ

今回は、React HooksのuseEffectについて解説しています。

第二引数の依存している値で初回のレンダリングのみか、値に変化がある場合にも処理の実行を制御できます。

useEffectはReact Hooksでも重要な機能です。しっかり理解をしておくと実務でも役立ちます。引き続き学習あるのみ！