Wormhole in React typescript does not render anything: createPortal + useContext

This is the corresponding playground.

Goal: Basically, I want all children of PortalEntrance to be rendered under PortalExit.

Basic idea:

• PortalProvider provides a ref
• PortalExit assigns the ref to one its children
• PortalEntrance uses the ref for the 2nd argument to createPortal

For completeness, here is the complete playground code:

import type { ReactNode } from "react";
import * as React from "react";
import { createPortal, render } from "react-dom";

type PortalContextType = {
  ref: React.MutableRefObject<HTMLDivElement>;
};

const PortalContext = React.createContext<PortalContextType>({
  ref: null
});

type PortalProviderProps = {
  children: ReactNode;
};

function PortalProvider({ children }: PortalProviderProps) {
  const ref = React.useRef<HTMLDivElement>(null);

  const value = React.useMemo(() => ({ ref }), [ref]);

  return (
    <PortalContext.Provider value={value}>{children}</PortalContext.Provider>
  );
}

function PortalExit() {
  const { ref } = React.useContext(PortalContext);

  return <div ref={ref}></div>;
}

type PortalEntranceProps = {
  children: ReactNode;
};

function PortalEntrance({ children }: PortalEntranceProps) {
  const { ref } = React.useContext(PortalContext);

  if (ref.current === null) {
    return <></>;
  }

  return createPortal(children, ref.current);
}

function App() {
  return (
    <PortalProvider>
      <div style={{ border: "1px solid green" }}>
        <PortalExit />
      </div>
      <div style={{ border: "1px solid red" }}>
        <PortalEntrance>my content</PortalEntrance>
      </div>
    </PortalProvider>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Assuming it should render "my content" message, right? If so - I have a solution.

The issue comes from ref and how rendering is handled by React. React re-renders the component if a state of some sort updates. How is this an issue?

Refs, on the first render, are null and only then obtain their value (reference) after the initial render but that does NOT trigger a re-render.

When you put these 2 together - your component PortalEntrance does not update. You have a logic that if ref.current is null then render an empty fragment. else - render a createPortal.

function PortalEntrance({ children }: PortalEntranceProps) {
const { ref } = React.useContext(PortalContext);
if (ref.current === null) {
return <></>;
}
return createPortal(children, ref.current);
}

So on the first render ref is null so it goes into the if. After the initial render - ref is no longer null BUT nothing triggers a re-render.

Even tho it does not cause a re-render, the useEffect hook can still catch its value changing. Using that, you can change the state yourself forcing to re-render the component.

In the PortalEntrance component, create a useState like const [hasRef, setHasRef] = React.useState(false);. Before the if, create a useEffect that is listening to the ref like so

React.useEffect(() => {
setHasRef(!!ref.current);
}, [ref]);

And change your if statement to check hasRef rather than ref.current for rendering an empty fragment.

Your component should look like so:

function PortalEntrance({ children }: PortalEntranceProps) {
const { ref } = React.useContext(PortalContext);
const [hasRef, setHasRef] = React.useState(false);
React.useEffect(() => {
setHasRef(!!ref.current);
}, [ref]);
if (!hasRef) {
return <></>;
}
return createPortal(children, ref.current);
}

This does the trick. Working fork example: https://codesandbox.io/s/summer-field-7zi1pm?file=/src/index.tsx:769-1093