useHasMounted

Hey there! Today, let's talk about a handy custom React hook called useHasMounted. This hook is quite useful when you want to conditionally render components or perform actions based on whether your component has mounted or not.

After React Server Components (RSC) are released, this hook will be even more useful.

import { useState, useEffect } from 'react';

function useHasMounted() {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  return hasMounted;
}

Why use it?

• Conditional rendering: You can conditionally render parts of your UI that depend on the component being fully mounted.
• Avoid premature actions: Use this hook to avoid triggering actions or fetching data before your component is ready.

Custom hooks like useHasMounted are great for managing component lifecycle states in a more declarative and reusable way. Happy coding!

Usage

const Component = () => {
  const hasMounted = useHasMounted();

  if (!hasMounted) {
    return null;
  }

  return <div>Render only on client</div>
};