Правильный массив зависимостей для useEffect с перехватчиками React

Question

Я использую Create-React-App и (отлично) use-http для пользовательского перехвата useFetch.Цель состоит в том, чтобы сделать несколько вызовов API при входе в область учетной записи:

const [user, setUser] = useState(null)
const [profile, setProfile] = useState(null)
const [posts, setPosts] = useState(null)

const request = useFetch('/')

const initializeAccount = async () => {
  try {
    const user = await request.get('api/user/')
    const profile = await request.get('api/profile/')
    const posts = await request.get('api/posts/')
    if (user) {
      setUser(user.data)
    }
    if (profile) {
      setProfile(profile.data)
    }
    if (posts) {
      setPosts(posts.data)
    }
  } catch (e) {
    console.log('could not initialize account')
  }
}

useEffect(() => {
  initializeAccount()
  return () => console.log('unmount')
})

Я пытался использовать [] в качестве массива зависимостей, но я получаю ошибку, сообщающую о перемещении initializeAccount вмассив зависимостей.Если я добавлю его, функция будет выполняться бесконечно.

Как правильно настроить массив зависимостей, чтобы эта функция вызывалась один раз?Кроме того, каков будет правильный способ обработки прерывания каждого из вызовов API в этом сценарии?

Answer 1

Мой человек, чтобы один раз запустить useEffect для вызовов API, вы должны сделать это следующим образом:

useEffect(() => {
   initializeAccount()
   return () => console.log('unmount')
},[])

Надеюсь, это поможет.