What Are React Portals?
Understand the createPortal API and why rendering outside the root div is useful.
Welcome
In this lesson you will learn what React Portals are, why rendering outside the parent DOM tree is useful, and how to use the createPortal API.
The Normal React DOM Hierarchy
By default, every component renders inside its parent's DOM node. The entire React app usually lives inside one `
`. This works fine until you need a modal, tooltip, or dropdown to escape a parent with `overflow: hidden`.
All lessons in this course
- What Are React Portals?
- Building a Modal Component with Portals
- Handling Focus & Keyboard Traps in Modals
- Tooltips & Dropdown Menus with Portals