SSR / SR Rehydration Rendering

function_component.jsx

function function_component() {
  const hasMounted = useHasMounted();
  
  // has to be declared in function's body prior to usage
  // has to be on top to nullify unmounted runs
  if (!hasMounted) {
    return null;
  }
  
  // ...code runs here
  
  return (
    <div>function_component</div>
  );
};

useHasMounted.jsx

// https://joshwcomeau.com/react/the-perils-of-rehydration/
import react, { useState, useEffect } from "react";

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

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

  return hasMounted;
}