DEV Community

What are portals in React?

Code of Relevancy on February 11, 2023

In this article, we'll dive into the concept of portals in React and see how they can be used to enhance your UI components. Portals in React are ...

Read full post

Eckehard • Feb 13 '23 • Edited

This is the common way to create DOM elements with JS:

  let el = document.createElement('p')
  let tx = document.createTextNode('this is my text') 
  el.appendChild(tx)
  document.body.appendChild(el) // Append child to the DOM-tree

unless you append the "child" to anything, it is not rendered. So, this is a detached part of the DOM tree and you can easily build a part of your app as a child of this element.

What ist the difference to portals?

Code of Relevancy • Feb 13 '23

Thank you for your feedback. It's a little different in React. Let's say, it's allow you to render a component outside of the parent component's DOM tree and attach it to a specific DOM node in the DOM tree. Meaning that the component will be rendered as part of the DOM tree but it won't be a child of the parent component. It's helpful to control the placement of your components in a more specific way.. Portals provide a clean and organized way to manage these thing..

Nikolas ⚡️ • Feb 12 '23

What are other uses for portals besides creating modals?

Code of Relevancy • Feb 13 '23

It can be used for many reasons not just for modals.. Let's say, you can use portals to create popovers, notifications, tooltips, or any other UI componen that you want to render outside of the parent component's tree. This can be useful for cases where you want to keep the UI component within the DOM flow, but you want to position it differently or isolate it from the parent component's styles..
Thank you Nikolas for reading my article.. Happy coding..

Feskov • Feb 13 '23

Another use case for portals could be migrating a plain JS/html app to react gradually.

Code of Relevancy • Feb 13 '23

Yes, that's a great point.. Thank you Feskov for reading it and your valuable feedback..

Jatin Sharma • Feb 12 '23

I literally struggled while creating a simple popup modal when I was learning React. But portals saves the day for me.

Code of Relevancy • Feb 13 '23

Glad to hear that portals were helpful in resolving your issues.. thank you for reading and feedback..

Sojin Samuel • Feb 12 '23

Modals are one of the worst UX ever

Code of Relevancy • Feb 13 '23

Thank you Sojin, for sharing your opinion on modals.. So true, modals can be disruptive to the user experience if not designed or implemented correctly.. Good design and careful consideration can help ensure that modals are used effectively and not overused..

Akash • Nov 8

i think the whole point of this concept is to escape the stacking context issues or other positioning issues like hidden value for parent etc . anyone doubting this concept please refer stacking context conflicts .