Last active
November 7, 2020 18:52
-
-
Save Diegow3b/623008d2cb4113ca6efa8fe93ddb1d1d to your computer and use it in GitHub Desktop.
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
/* | |
Answers: | |
1 - React is not being imported | |
2 - When calling setData at line 11 was overring the existing profile | |
3 - userEffect was watching at setData instead of data | |
4 - Suspense was being called without fallback with is required | |
Extras (Improviments): | |
1 - Considering that UserProfileList is the main component from the respective file | |
was added export default to be used externaly | |
2 - Calling SuspensefulUserProfile was changed from manually calling 3 to mapping a array with ids and interating them | |
*/ | |
import React, { Suspense, useState, useEffect } from 'react'; | |
const SuspensefulUserProfile = ({ userId }) => { | |
const [data, setData] = useState({}); | |
useEffect(() => { | |
fetchUserProfile(userId).then((profile) => setData([...data, profile])); | |
}, [userId]); | |
return ( | |
<Suspense fallback={<h1>Loading profile...</h1>}> | |
<UserProfile data={data} /> | |
</Suspense> | |
); | |
}; | |
const UserProfile = ({ data }) => { | |
return ( | |
<> | |
<h1>{data.name}</h1> | |
<h2>{data.email}</h2> | |
</> | |
); | |
}; | |
export default UserProfileList = () => ( | |
<> | |
{[1,2,3].map(userId => ( | |
<SuspensefulUserProfile key={userId} userId={userId} /> | |
))} | |
</> | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment