Created
July 5, 2021 14:51
-
-
Save arman94/d31f386c933f5713d25198c32ab6862f to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| /* | |
| these are all issues i found in the main code: | |
| 1. all the children in Suspense component must be lazy-loaded | |
| 2. Suspense component should receive a fall-back component | |
| 3. Using useEffect hook in a component along side Suspense cause the race condition. Api call must be moved | |
| in to parent component | |
| */ | |
| import { Suspense, useState, useEffect, lazy } from 'react'; | |
| const UserProfileLazy = lazy(() => import './UserProfile'); | |
| const SuspensefulUserProfile = ({ userData }) => { | |
| return ( | |
| <Suspense fallback={<h1>Loading Profile ....</h1>}> | |
| <UserProfileLazy data={userData} /> | |
| </Suspense> | |
| ); | |
| }; | |
| // should be moved in to a file with the same name of the component | |
| const UserProfile = ({ data }) => { | |
| return ( | |
| <> | |
| <h1>{data.name}</h1> | |
| <h2>{data.email}</h2> | |
| </> | |
| ); | |
| }; | |
| const UserProfileList = () => { | |
| const [data, setData] = useState([]); | |
| const userIds = [1, 2, 4]; | |
| useEffect(() => { | |
| fetchUserProfile(userId).then((profile) => setData(profile)); | |
| }, [userId, setData]); | |
| return data.map((userData, index) => <SuspensefulUserProfile userData={userData} key={index}) | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment