Why are React Portals used?

React Portals are used to render a component outside its parent DOM container while still keeping it connected to the React component tree.

They are mainly helpful when an element needs to appear on top of the UI without being affected by parent styles.

Common use cases

• Modals
• Popups
• Tooltips
• Toast notifications

Why they are useful

• Avoid CSS issues like overflow: hidden
• Handle z-index problems easily
• Maintain normal React behavior (props, context, events)