A analista Ana está desenvolvendo a interface gráfica da aplicação web TCEDash, utilizando React com componentes funcionais. Ana precisa que o componente TelaUm, do TCEDash, execute determinada sequência de instruções a cada nova renderização. Porém, a sequência de instruções deve ser garantidamente executada antes de o navegador web atualizar visualmente a tela. Para garantir a execução antes da atualização visual da tela, Ana deve implementar a sequência de instruções dentro do hook do React:
- A)useEffect;
Errada, porque useEffect executa depois da pintura da tela, não garantindo a execução antes da atualização visual.
- B)useTransition;
Errada, porque useTransition é usado para marcar atualizações como não urgentes, e não para controlar a execução antes do paint.
- C)useLayoutEffect;
Certa, porque useLayoutEffect roda após a atualização do DOM e antes de o navegador pintar a interface, atendendo ao requisito da questão.
- D)useDeferredValue;
Errada, porque useDeferredValue adia o uso de um valor para melhorar desempenho, sem relação com executar instruções antes da pintura.
- E)useImperativeHandle.
Errada, porque useImperativeHandle serve para personalizar a API exposta por refs, não para controlar o momento da execução visual.
Gabarito: C
Quando você trabalha com React, a escolha do hook depende do momento em que o código precisa rodar no ciclo de vida da renderização. Se a ideia é executar uma sequência de instruções logo após a atualização do DOM, mas antes de o navegador “pintar” a tela para o usuário, o hook certo é o useLayoutEffect. Ele é muito usado quando você precisa medir layout, ajustar posição, tamanho ou evitar um “piscar” visual entre a renderização e a correção da interface. O useEffect, por outro lado, roda depois que o navegador já atualizou a tela, então ele é ótimo para efeitos colaterais comuns, como requisições, logs e assinaturas, mas não garante essa execução prévia à pintura. Já o useLayoutEffect é executado de forma síncrona após as mudanças no DOM e antes do paint, o que atende exatamente ao que o enunciado pediu. Em prova, a FGV adora cobrar essa diferença de timing: useEffect para depois da pintura e useLayoutEffect para antes da pintura. Não é detalhe de luxo, é o tipo de detalhe que derruba muita gente. E aqui o enunciado foi bem direto ao dizer que a sequência deve ocorrer antes da atualização visual, então a resposta encaixa perfeitamente. Os outros hooks citados têm outras finalidades: useTransition e useDeferredValue ajudam na experiência com atualizações concorrentes e desempenho, e useImperativeHandle serve para controlar o que um componente expõe via ref. Nenhum deles resolve a exigência de executar código antes do navegador mostrar a tela.