Not rendering before an outPortal is used

[johanlajili]

Hello, is there a way to differ the first render of the InPortal until the first outPortal is rendered? I want to prevent useless render / enable lazy loading for scenarios where the OutPortal would not be used in the user's navigation.

[pimterry]

There's no built-in support for this, but I think you can probably do it yourself. Something like:

    const portalNode = React.useMemo(() => portals.createHtmlPortalNode(), []);

    return <div>
        <portals.InPortal node={portalNode}>
            <MyComponent render={false} />
        </portals.InPortal>

        {/* ... The rest of your UI ... */}

        <portals.OutPortal node={props.portalNode} render={true} />
    </div>;

Then if MyComponent receives a render prop set to false, it does nothing. That's the basic version, but you can do anything you like with this - e.g. you can pull the render flag out into a wrapper component, and optionally render the inner component there, to avoid constructing the component at all.

Does that work for you? If there's a case that can't be solved using a simple wrapper yourself, I'm open to changes here, but it's likely to be more flexible & much simpler if you compose this on top of react-reverse-portal in your own code instead.

[pimterry]

@johanlajili did you try the above? Does that work for you?

I'm going to close this for now, but happy to reopen if you're still having issues, just let me know.