import React , { memo , useEffect } from 'react' ; import { usePortalState } from '../../hooks/usePortalState' ; import { usePortal } from '../../hooks/usePortal' ; import type { PortalHostProps } from './types' ; const PortalHostComponent = ( { name } ) => { const state = usePortalState ( name ) ; const { registerHost , deregisterHost } = usePortal ( name ) ; useEffect ( ( ) => { registerHost ( ) ; return ( ) => { deregisterHost ( ) ; } ; } , [ ] ) ; return < > { state . map ( item => item . node ) } < />; } ; export const PortalHost = memo ( PortalHostComponent ) ; PortalHost . displayName = 'PortalHost' ;