import React, { useLayoutEffect, useMemo, useState } from 'react';
import { PortalBucket } from './PortalBucket';
export function createPortalRendererComponent(portalManager) {
  return function PortalRenderer() {
    const [buckets, setBuckets] = useState(portalManager.getBuckets());
    useLayoutEffect(() => {
      portalManager.registerPortalRenderer(setBuckets);
      return () => {
        portalManager.unregisterPortalRenderer();
      };
    }, []);
    const portalsElements = useMemo(
    // Ignored via go/ees005
    // eslint-disable-next-line react/no-array-index-key
    () => buckets.map((_, i) => /*#__PURE__*/React.createElement(PortalBucket, {
      key: i,
      id: i,
      portalManager: portalManager
    })), [buckets]);
    return /*#__PURE__*/React.createElement(React.Fragment, null, portalsElements);
  };
}