hasMounted - snappify.com

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