🌀
Padrão

React Portals

Renderiza filhos em outro lugar do DOM, mantendo a árvore React. Útil para modals, tooltips, dropdowns.

Definição

Portals (createPortal) renderizam um componente em um nó DOM diferente do pai, mas mantêm a hierarquia React (events, context, state funcionam normalmente). Ideal para elementos que precisam escapar de overflow:hidden ou z-index do pai.

🔴 Problema

Modal dentro de um container com overflow:hidden é cortado. Tooltip dentro de um sidebar com z-index baixo fica atrás de outros elementos.

Solução

Portal renderiza o modal em document.body (ou outro nó), escapando dos limites visuais do pai. Mas eventos ainda 'sobem' pela árvore React, não pela DOM.

💡 Dica Senior

Portal não muda comportamento de events em React (bubble pela árvore React). Mas no DOM real, o event sobe a partir do nó portal — pode confundir libs que dependem de event.target.closest().

Perguntas de Entrevista

27/48