Deep dive into React Portals
Download as PPTX, PDF0 likes162 views
React portals allow rendering a component into a DOM node that exists outside the DOM hierarchy of the parent component. Portals are useful for modals, notifications, and other components that need to "pop out" in front of other content. Some key uses of portals include components that should always stay on top, children that are larger than their parent containers, and lightboxes. Portals handle complexity by enforcing a separation of concerns between UI layout and code, making state management easier.
1 of 32
Download to read offline
More Related Content
What's hot (20)
Ad
Similar to Deep dive into React Portals (20)
Ad
Deep dive into React Portals
- 1. Deep Dive into React Portals Souvik Basu
- 2. What is React Portal
- 7. When to use Portals? • Always on Top • Child bigger than Parent
- 8. Lightbox
- 9. Children that spill out of parent div
- 10. Why to use Portals? • Handles code complexity (easier state management)
- 11. Concerns around usage of React Portal • Spaghetti code • Portals are like goto statement
- 12. goto
- 13. Portal inside Portal inside Portal
- 14. Clean design using Portals • Virtual DOM abstraction • Portal enforces to think in terms of React Elements and not DOM
- 15. Component 1 DOM JSX Component 1 Component 2 Comp 3 Comp 4 <div> <div> <div> <div>
- 20. DOM JSX
- 24. DOM JSX
- 25. DOM JSX
- 27. Testing using Enzyme • mount -> DOM • shallow -> Component
- 28. State Management in Portals
- 29. Gotchas with Portals • Avoid State flow as per UI designs • Rather think in terms of Components • Portals is part of ReactDOM and not React
- 30. Some cool stuff • https://hackernoon.com/using-a-react-16-portal-to-do-something- cool-2a2d627b0202
- 32. Q n A Thank you @souvikbasu Code: bit.ly/reactportals