Reactでaxios.getを複数回使うときはPromise.allを使わないとレンダリング回数が増えてしまう

Reactでaxios.getを複数回使うときはaxios.allを使わないとレンダリング回数が増えてしまう

axios.getを複数回使うとレンダリング回数が増える

ReactでAPIをたたいてJSONのデータを取得する際にはaxios.getがよく使われます。

TSX

const user1 = await axios.get('https://jsonplaceholder.typicode.com/users/1')

Reactでaxios.getを使用する際はuseEffect内に書かれることが多いですが、もしaxios.getが2回以上ある場合は、Promise.allを使用せずにそのまま書くと、レンダリング回数が無駄に増えてしまうことがあるので注意が必要です。

例えば以下のコードだとレンダリングは6回(3回)ですが…

TSX

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

type User = {
  id: number
  name: string
}

const App = () => {
  console.log('⛩️ App render')
  const [users, setUsers] = useState<User[]>([])

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const user1 = await axios.get('https://jsonplaceholder.typicode.com/users/1')
        const user2 = await axios.get('https://jsonplaceholder.typicode.com/users/2')
        setUsers([user1.data, user2.data])
      } catch (error) {
        console.error('データ取得に失敗しました', error)
      }
    }

    fetchUsers()
  }, [])

  return (
    <>
      <h1>Users name</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </>
  )
}

export default App

Promise.allでまとめて実行すると4回(2回)になります。(括弧内は本番のレンダリング回数)

TSX

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

type User = {
  id: number
  name: string
}

const App = () => {
  console.log('⛩️ App render')
  const [users, setUsers] = useState<User[]>([])

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const [user1, user2] = await Promise.all([
          axios.get('https://jsonplaceholder.typicode.com/users/1'),
          axios.get('https://jsonplaceholder.typicode.com/users/2'),
        ])

        // 取得したデータをセット
        setUsers([user1.data, user2.data])
      } catch (error) {
        console.error('データ取得に失敗しました', error)
      }
    }

    fetchUsers()
  }, [])

  return (
    <>
      <h1>Users name</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </>
  )
}

export default App