Created
January 24, 2020 19:31
-
-
Save sassygrody/68dd113a2655de59886deb6db629353f to your computer and use it in GitHub Desktop.
Fetch data in React Functional Component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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> | |
) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment