What is createPortal in reactjs, and how is use it?

ReactJs

What is createPortal in reactjs, and how is use it?

The createPortal API is an advanced technique of reactjs.

createPortal API is not an advanced method or technique in reactjs. Every beginner or advanced developer easy learn the createPortal API with a simple example. You can achieve the same thing without using the createPortal API. But it provides a rich development experience.

All the code is available on GitHub, and checks the demo.

What is createPortal in reactjs?

The createPortal is a React API that helps to render children into different Dom.

Everybody knows createPortal API when working with react.js from the first day. createPortal provides a feel similar work experience to createRoot API. There are lots of differences, which we discuss here.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

What is the difference between createPortal vs createRoot?

1. createRoot is rendered inter App in root id, while createPortal renders children in the same component based on id.
2. createRoot Returns an object with two methods: render and unmount.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

//  Usually, we do not calls to the root unmount method.

root.unmount()

The similarity between createPortal and createRoot

Both APIs are imported from react-dom package. Because both APIs manipulate the Dom ( Document Object model).

How is the use createPortal API?

The best use of createPortal API in react. When you use material UI, bootstrap, tailwind and any other UI libraries, Model, dialogue, Alert and dropdown.

In the article, We use the bootstrap library to build a real-life demo, and I teach you how to use createPortal API.

What is createPortal in reactjs, and how is use it?

The best use of createPortal API is to create an Alert message on the website. It is not only a single way. You can also use createPortal API with your logic.

What is createPortal in reactjs, and how is use it?

I used createPortal API to render the Alert component; I created the Alert component with bootstrap. It is a straightforward example to understand the createPortal API functionality.

import { useState } from 'react';
import { createPortal } from 'react-dom';
import Alert from './components/Alert.js';
import Card from "./components/Card";
import Navbar from './components/Navbar.js';

// target the share-alert ID

let shareAlert =  document.getElementById('share-alert')


export default function PortalExample() {

  const [showModal, setShowModal] = useState(false);

  return (
    
   <>
    
     { 
      
       showModal && createPortal(
         <Alert onClose={() => setShowModal(false)} />,
         shareAlert
       )
     }

     <Navbar />
      
     <div className="row row-cols-1 row-cols-md-3 g-4">

        <Card onClick={() => setShowModal(true)} />

        <Card onClick={() => setShowModal(true)} />

        <Card onClick={() => setShowModal(true)} />

      </div>

    </>

  );
}

You can also build a complex UI for the website. You can also recreate my Alert demo example without the use of createPortal API. I never feel any performance issue with createPortal API.

But make sure you target the #share-alert ID in react. your #share-alert ID is present in DOM and is unique on the entire website ( page ).

You can learn more at https://beta.reactjs.org/reference/react-dom/createPortal

Conclusion

createPortal API helps to render a jsx directly into DOM or another component in DOM. The createPortal API efficiently work with react. If you use nextjs, it is tough to work with createPortal API. On nextjs, avoid it.

You can share and follow us on Twitter and Linkedin. If you like my work, please read more content on the officialrajdeepsingh.dev, Nextjs, frontend web, and Sign up for a free newsletter.