O analista José está implementando um frontend web utilizando React. Em determinada tela do frontend, José precisa que o componente A seja renderizado pelo navegador em um nó do Document Object Model (DOM) que se encontra fora da hierarquia normal de renderização. Sabendo que o React oferece uma função que cumpre o propósito de orientar a renderização de componentes em partes inesperadas do DOM, José optou por utilizar essa função. Para orientar a renderização do componente A no nó desejado, o analista José utilizou a seguinte função do React:
- A)flushSync;
Errada: flushSync serve para forcar a atualizacao sincronizada do estado/renderização, nao para renderizar em outro nó do DOM.
- B)preRender;
Errada: preRender nao e a funcao do React usada para direcionar um componente para um container externo do DOM.
- C)createPortal;
Certa: createPortal permite renderizar um componente em um nó do DOM fora da hierarquia normal da arvore React.
- D)preinitModule;
Errada: preinitModule esta ligada a preparacao/carregamento de modulos, nao ao posicionamento da renderização no DOM.
- E)preloadModule.
Errada: preloadModule trata de antecipar o carregamento de modulos, mas nao de mover a renderização para outro ponto da pagina.
Gabarito: C
No React, quando voce precisa renderizar um componente em um ponto do DOM que fica fora da hierarquia normal da aplicação, a ferramenta certa sao os Portals. Eles servem justamente para "teletransportar" a renderização para outro nó do DOM, sem perder o comportamento do React, como estado e eventos. Isso e muito usado em modais, pop-ups, tooltips e overlays, que costumam precisar ficar fora da arvore principal para nao sofrer com regras de CSS, z-index ou overflow. A funcao que faz isso e a createPortal. Ela recebe o elemento React e o container do DOM onde o conteudo deve aparecer. Ou seja: o componente continua sendo controlado pelo React, mas a saida visual vai para outro lugar da pagina. E por isso o enunciado fala em "nó do DOM fora da hierarquia normal de renderização" - e o nome disso, no universo React, e Portal. As outras alternativas misturam conceitos de desempenho e carregamento. Elas podem aparecer em questoes porque parecem "modernas", mas nao resolvem onde o componente vai ser desenhado. Aqui nao se trata de forcar sincronismo nem de pre-carregar modulos, e sim de renderizar em outro ponto do DOM. Em resumo: se a ideia e mandar um componente para fora da arvore principal, voce pensa em portal. A banca FGV adora esse tipo de troca sutil: a pergunta descreve um comportamento visual/estrutural, mas as alternativas tentam te distrair com funcoes de performance.