import React , { memo , useReducer } from 'react' ; import { PortalHost } from '../portalHost/PortalHost' ; import { PortalDispatchContext , PortalStateContext , } from '../../contexts/portal' ; import { INITIAL_STATE } from '../../state/constants' ; import { reducer } from '../../state/reducer' ; import type { PortalProviderProps } from './types' ; const PortalProviderComponent = ( { rootHostName = 'root' , shouldAddRootHost = true , children , } ) => { const [ state , dispatch ] = useReducer ( reducer , INITIAL_STATE ) ; return ( < PortalDispatchContext . Provider value = { dispatch } > < PortalStateContext . Provider value = { state } > { children } { shouldAddRootHost && < PortalHost name = { rootHostName } />} < /PortalStateContext.Provider> < /PortalDispatchContext.Provider>); } ; export const PortalProvider = memo ( PortalProviderComponent ) ; PortalProvider . displayName = 'PortalProvider' ;