React Portals render children into a DOM node outside the parent component's hierarchy. Here's how to use them.
Basic Portal
Loading code block...
Portal Container
Loading code block...
Modal Component
Loading code block...
Dropdown with Portal
Loading code block...
Toast Notifications
Loading code block...
Focus Management
Loading code block...
Event Bubbling
Loading code block...
SSR Considerations
Loading code block...
Best Practices
Use Portals For:
✓ Modals and dialogs
✓ Tooltips and popovers
✓ Dropdown menus
✓ Toast notifications
Accessibility:
✓ Manage focus properly
✓ Use focus traps in modals
✓ Include ARIA attributes
✓ Handle escape key
Event Handling:
✓ Remember events bubble through React tree
✓ Stop propagation when needed
✓ Clean up event listeners
Avoid:
✗ Overusing portals for simple cases
✗ Forgetting cleanup in useEffect
✗ Ignoring SSR compatibility
✗ Breaking accessibility
Conclusion
React Portals are essential for rendering UI that needs to visually "break out" of its container, like modals, tooltips, and dropdowns. Events still bubble through the React tree, and context works normally. Always manage focus properly and ensure accessibility when using portals for interactive content.