What are React Portals?
Let's dive into an incredibly powerful feature in React that you might not be using yet: React Portals. If you're not familiar with them, don't worry. By the end of this article, you'll not only know what they are but also see why they can be a incredibly useful for your projects!
In essence, React Portals provide a way to render children into a DOM node that exists outside the hierarchy of the parent component. Normally, React components are rendered within the confines of their parent components, but with portals, you can render a child component into a different part of the DOM.
Imagine you have a notification banner that needs to be displayed at the top level of your application. This banner should be triggered by various components deep in your component hierarchy. Managing such a requirement can lead to CSS complications and z-index nightmares. React Portals solve this elegantly by allowing these elements to be rendered outside of the parent component's tree, making them easier to manage and style.
In this example, we're using createPortal to render the notification banner directly into the document.body, outside of the normal React component tree.
