Skip to content

Instantly share code, notes, and snippets.

@priyankaa02
Created October 8, 2020 05:45
Show Gist options
  • Save priyankaa02/c58663b2f7a2fd400c4b14cf9c0bdfb4 to your computer and use it in GitHub Desktop.
Save priyankaa02/c58663b2f7a2fd400c4b14cf9c0bdfb4 to your computer and use it in GitHub Desktop.
import React, { Suspense, useState, useEffect } from 'react'; // React should also be imported
const SuspensefulUserProfile = ({ userId } :{ userId: number }) => { //since this file extension is .tsx then type should assign else this will throw error
const [data, setData] = useState({});
useEffect(() => {
fetchUserProfile(userId).then((profile) => setData(profile));
}, [userId]) // we should not add setData as a dependency here, userId is enough
return (
<Suspense fallback={<Loading /> || null}> //fallback should always be here
<UserProfile data={data} />
</Suspense>
);
};
interface MyObject {
name: string;
email: string;
}
const UserProfile = ({data}: { data: MyObject }) => { //since this file extension is .tsx then type should assign else this will throw error
return (
<>
<h1>{data.name}</h1>
<h2>{data.email}</h2>
</>
);
};
const UserProfileList = () => (
<>
<SuspensefulUserProfile userId={1} />
<SuspensefulUserProfile userId={2} />
<SuspensefulUserProfile userId={3} />
</>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment