Fetch data in React Functional Component

example.js

// The goal: get data from JS Fetch API (an async function) and render data

// Example 1 (basic): 
// add an async function inside of useEffect that will await the result of the Fetch request
// set the state to be rendered in the JSX
// add id to the useEffect dependency list to prevent page from constantly refetching data
import React, { useState, useEffect } from 'react'
import FetchService from './FetchService'
import SessionService from './SessionService'

export function UserProfile() {
  const id = SessionService.getUserId()
  const [userProfile, setUserProfile] = useState({})

  useEffect(() => {
    const fetchUser = async () => {
      const response = await FetchService.fetchAPI(`users/${id}`, 'GET')
      setUserProfile(response)
    }
    fetchUser()
  }, [id])

  return (
    <div className="max-w-3xl mx-auto text-center">
      <p>Name: {userProfile?.data?.name}</p>
      <p>Username: {userProfile?.data?.username}</p>
      <p>Password Expired? {userProfile?.data?.isPasswordExpired.toString()}</p>
    </div>
  )
}

// example 2: (extract async fetch outside of useEffect)
// *** requires useCallback hook! ****
// useCallback memoizes the function definition, which allows the function persist as the same instance in memory...
// because fetchUserProfile function is a dependency of useEffect, useEffect would be called anytime the function itself changes
// React warnings are super helpful for using these hooks properly
// useEffect does not need an async function inside of it

import React, { useState, useEffect, useCallback } from 'react'
import FetchService from './FetchService'
import SessionService from './SessionService'

export function UserProfile() {
  const id = SessionService.getUserId()
  const [userProfile, setUserProfile] = useState({})

  const fetchUserProfile = useCallback(async () => {
    const response = await FetchService.fetchAPI(`users/${id}`, 'GET')
    setUserProfile(response)
  }, [id])

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

  return (
    <div className="max-w-3xl mx-auto text-center">
      <p>Name: {userProfile?.data?.name}</p>
      <p>Username: {userProfile?.data?.username}</p>
      <p>
        Password Expired? {userProfile?.data?.isPasswordExpired?.toString()}
      </p>
    </div>
  )
}

// Example 3: (pull fetch function outside of the component)
// Nice if you want to export the function for testing
// Does not require the useCallback hook
// useEffect needs an async function inside of it again

import React, { useState, useEffect } from 'react'
import FetchService from './FetchService'
import SessionService from './SessionService'

const fetchUserProfile = async id => {
  const response = await FetchService.fetchAPI(`users/${id}`, 'GET')
  return response
}

export function UserProfile() {
  const id = SessionService.getUserId()
  const [userProfile, setUserProfile] = useState({})

  useEffect(() => {
    async function getTheProfile() {
      const data = await fetchUserProfile(id)
      setUserProfile(data)
    }

    getTheProfile()
  }, [id])

  return (
    <div className="max-w-3xl mx-auto text-center">
      <p>Name: {userProfile?.data?.name}</p>
      <p>Username: {userProfile?.data?.username}</p>
      <p>
        Password Expired? {userProfile?.data?.isPasswordExpired?.toString()}
      </p>
    </div>
  )
}