import { useEffect, useState } from 'react';
const useHasMounted = () => {
const [hasMounted, setHasMounted] = useState(false);
useEffect(() => {
setHasMounted(true);
}, []);
return hasMounted;
};
export default useHasMounted;
import useHasMounted from '@hooks/hasMounted';
import TwitterFeed from '@components/TwitterFeed';
export default function Home() {
const hasMounted = useHasMounted();
return (
<div>
<section>
{hasMounted && <div><TwitterFeed /></div>}
</section>
</div>
)
}
Loads TwitterFeed
only on client-side
Because useEffect only
runs on client-side
hasMounted will be true
when client is ready