React reusable Portal component

ReactPortal.js

import { useEffect, useRef, memo } from 'react';
import { createPortal } from 'react-dom';

const Portal = ({ children }) => {
  // Keeps ref between renders
  const el = useRef(null);

  // Create element if empty (for the first render only)
  if (!el.current) el.current = document.createElement('div');

  useEffect(() => {
    const mount = document.body;
    const { current } = el;

    mount.appendChild(current);
    
    // Clean up: remove DOM element when the component unmounts
    return () => mount.removeChild(current);
  }, []); // No dependencies to avoid rerenders

  return createPortal(children, el.current);
};

export default memo(Portal);