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 → Solução

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 de entrevista

Tip

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().

Código

function Modal({ children, onClose }) {
  return createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content">{children}</div>
    </div>,
    document.getElementById('modal-root')
  );
}

// Renderizado no DOM em document.getElementById('modal-root')
// Mas no React continua sendo filho do componente que o chamou

Perguntas de entrevista

Q.Por que usar Portal em vez de mover o componente para o root?▾

A.Portal mantém a relação React (props, context, refs). Se você renderizar fora, perde acesso a contexts e props. Portal é o melhor dos dois mundos.

Q.Eventos 'borbulham' através de Portals?▾

A.Sim, no React. Um onClick no parent React captura cliques do portal, mesmo o portal estando em document.body. No DOM nativo não, mas o React simula isso.

Q.Onde colocar o div root para portals?▾

A.Geralmente <div id='modal-root'> no public/index.html ou layout.tsx, fora da div principal do app. Permite z-index alto sem conflitos.

27/122← →