There seems to be an issue with ReactDOM.createPortal() generating redundant empty divs in next.js with TypeScript

Question

There seems to be an issue with ReactDOM.createPortal() generating redundant empty divs in next.js with TypeScript

This is the backdrop component in TypeScript:

interface BacdropProps {
  open?: string;
  onClick: () => void;
}

const Backdrop: React.FC<BacdropProps> = (props) => {
  let container: HTMLDivElement | null = null;
  if (typeof window !== "undefined") {
    const rootContainer = document.createElement("div");
    const parentElem = document.querySelector("#__next");
    parentElem?.insertAdjacentElement("afterend", rootContainer);
    container = rootContainer;
  }

  return container
    ? ReactDOM.createPortal(
        <div
          className={["backdrop", props.open ? "open" : ""].join(" ")}
          onClick={props.onClick}
        />,
        container
      )
    : null;
};

export default Backdrop;

This is the CSS for the Backdrop component:

.backdrop {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  transition: opacity 0.3s ease-out;
  opacity: 1;
}

This is an image of how it looks: https://i.sstatic.net/umwK7.png

css reactjs typescript next.js react-portal

Answer 1

Answer №1

Your code is currently creating div.backdrop every time the Backdrop component re-renders. The correct approach should be to create it only once. This can be achieved by using useEffect to ensure that ReactDOM.createPortal is executed just once. Additionally, you can use useRef to maintain the same instance of the container across renders.

const containerRef = useRef<HTMLDivElement>(null);

useEffect({
  // Executed only once on the client side
  if (typeof window !== "undefined") {
    const rootContainer = document.createElement("div");
    const parentElem = document.querySelector("#__next");
    parentElem?.insertAdjacentElement("afterend", rootContainer);
    containerRef.current = rootContainer;
  }
}, [window])

useEffect({
  // Executed once when containerRef is bound to <HTMLDivElement>
  if(containerRef.current) {
    ReactDOM.createPortal(
      <div
        className={["backdrop", props.open ? "open" : ""].join(" ")}
        onClick={props.onClick}
      />,
      containerRef.current
    )
  }
}, [containerRef])

Edit

I removed the check for the existence of window, as useEffect will only run on the client-side.
Since ReactDOM.createPortal creates the div.backdrop outside the root HTMLElement (div#next), returning null in the Backdrop component should suffice.

const containerRef = useRef<HTMLDivElement>(null);

useEffect({
  // useEffect runs only on the client side
  const rootContainer = document.createElement("div");
  const parentElem = document.querySelector("#__next");
  parentElem?.insertAdjacentElement("afterend", rootContainer);
  containerRef.current = rootContainer;
}, [])

useEffect({
  // Executed once when containerRef is bound to <HTMLDivElement>
  if(containerRef.current) {
    ReactDOM.createPortal(
      <div
        className={["backdrop", props.open ? "open" : ""].join(" ")}
        onClick={props.onClick}
      />,
      containerRef.current
    )
  }
}, [containerRef])

return null;

Answer 2

Your code is currently creating div.backdrop every time the Backdrop component re-renders. The correct approach should be to create it only once. This can be achieved by using useEffect to ensure that ReactDOM.createPortal is executed just once. Additionally, you can use useRef to maintain the same instance of the container across renders.

const containerRef = useRef<HTMLDivElement>(null);

useEffect({
  // Executed only once on the client side
  if (typeof window !== "undefined") {
    const rootContainer = document.createElement("div");
    const parentElem = document.querySelector("#__next");
    parentElem?.insertAdjacentElement("afterend", rootContainer);
    containerRef.current = rootContainer;
  }
}, [window])

useEffect({
  // Executed once when containerRef is bound to <HTMLDivElement>
  if(containerRef.current) {
    ReactDOM.createPortal(
      <div
        className={["backdrop", props.open ? "open" : ""].join(" ")}
        onClick={props.onClick}
      />,
      containerRef.current
    )
  }
}, [containerRef])

Edit

I removed the check for the existence of window, as useEffect will only run on the client-side.
Since ReactDOM.createPortal creates the div.backdrop outside the root HTMLElement (div#next), returning null in the Backdrop component should suffice.

const containerRef = useRef<HTMLDivElement>(null);

useEffect({
  // useEffect runs only on the client side
  const rootContainer = document.createElement("div");
  const parentElem = document.querySelector("#__next");
  parentElem?.insertAdjacentElement("afterend", rootContainer);
  containerRef.current = rootContainer;
}, [])

useEffect({
  // Executed once when containerRef is bound to <HTMLDivElement>
  if(containerRef.current) {
    ReactDOM.createPortal(
      <div
        className={["backdrop", props.open ? "open" : ""].join(" ")}
        onClick={props.onClick}
      />,
      containerRef.current
    )
  }
}, [containerRef])

return null;

There seems to be an issue with ReactDOM.createPortal() generating redundant empty divs in next.js with TypeScript

Answer №1

Similar questions

The recharts error message displays: "There is no overload that matches this call."

Reacting with Node.js: Capturing a selected option from a dropdown menu and storing it in the database

Incorporating photos within the layout of a Twitter Bootstrap grid

Error TS2322: The object with properties "ready: false" and "session: null" cannot be assigned to the type "Readonly<S & withAuthState>"

Arranging arrangements in javascript

Custom value in Field for radio type in Redux form

Waiting for an HTTP request to complete during server-side rendering with Angular 5 Universal

The instanceof operator does not recognize the value as an instance and is returning false, even though it

Encountered an error while compiling following the 'npm start' command in the create-react-kotlin

Creating a sleek layout with dropdowns and checkboxes aligned side by side in MVC 5 using Bootstrap 4

Displaying two div elements horizontally using Material-UI

Simultaneously operating the front and backend in Electron

Tips for resolving the React ENOENT issue: Whenever I attempt to run npm, I am faced with the following error message: 'C:\Users\User\Desktop\react app\new-react-app\.next\BUILD_ID'

mandatory data fields for an HTML form

Guide to Creating Reusable Components Similar to Bootstrap

"Excessive re-renders caused by the .map function in the webpage

Show a pop-up notification when the quantity in one set of cells matches the quantity in a different set of cells

If you encounter the error message "The term 'Office' is not defined no-undef" it may be due to using a version of react-script that is newer than 3.0.0

Guide to changing the color of HTML cells depending on the dynamic text

Invalid domain used in the HTTP request