A Subtle Introduction to Portals In React
summary
Portals render children into a DOM node outside the parent while preserving React context, event bubbling and state, introduced in React 16 and implemented with react-dom.createPortal. Practical builds include modals and select menus where a portal keeps focus trapped in the widget and lets other parts remain interactive, unlike a native select that blocks interaction until closed. Demo code shows createPortal targeting document.body and the approach reliably fixes overflow/stacking-context clipping.
AI-written summary · about
chapters (6)
- 0:00A Subtle Introduction to React Portal
- 2:58What is React Portal?
- 6:28an example of a React Portal?
- 7:53Benefits of React portal to developers
- 9:36Improving accessibility in custom widgets with React portal
- 15:01Things to Note When Using React
