Questão de Engenharia de Software — Desenvolvimento de Software — FGV 2023
Engenharia de Software›Desenvolvimento de Software
Código
fg071499
Banca
FGV
Órgão
TCE-SP
Ano
2023
Nível
Superior
Cargo
Agente da Fiscalização - TI
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:
AuseEffect;
BuseTransition;
CuseLayoutEffect;
DuseDeferredValue;
EuseImperativeHandle.
Revelar gabarito e comentário▾
GabaritoC — useLayoutEffect;
Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.
Hooks do React e execução síncrona antes do paint
Gabarito: letra C. O hook useLayoutEffect é o único que garante que a sequência de instruções seja executada antes da atualização visual da tela (antes do navegador pintar o DOM). Diferente do useEffect, que é assíncrono e executa após a pintura, o useLayoutEffect é síncrono e roda imediatamente após as mutações do DOM, mas antes do navegador renderizar visualmente.
Hook
Comportamento
Execução em relação ao paint
Uso principal
useEffect
Assíncrono
Após a pintura
Efeitos colaterais comuns (buscas, subscriptions)
useTransition
Assíncrono
Não relacionado ao paint
Marcar atualizações como não urgentes
useLayoutEffect
Síncrono
Antes da pintura
Ler/medir layout, modificar DOM antes da exibição
useDeferredValue
Assíncrono
Não relacionado ao paint
Adiar atualizações de interface
useImperativeHandle
Síncrono
Não relacionado ao paint
Expor métodos/funções a componentes pai
Hooks do React (timing): Antes do paint (síncrono) (useLayoutEffect (C)); Após o paint (assíncrono) (useEffect (A)); Sem relação com paint (useTransition (B), useDeferredValue (D), useImperativeHandle (E))
Alternativa A — ❌ Incorreta
useEffect: Executa de forma assíncrona após a renderização e a pintura. Não atende ao requisito de execução antes da atualização visual.
Alternativa B — ❌ Incorreta
useTransition: Permite marcar uma atualização de estado como não urgente, permitindo que o React adie a renderização para manter a fluidez. Não está relacionado ao timing de execução em relação ao paint.
Alternativa C — ✅ Correta ⟵ GABARITO
useLayoutEffect: Executa sincronamente imediatamente após as mutações do DOM, mas antes do navegador realizar a pintura. É ideal para ler ou modificar o layout e garantir que as mudanças sejam aplicadas antes da exibição.
Alternativa D — ❌ Incorreta
useDeferredValue: Permite adiar a atualização de uma parte da interface para momentos de menor urgência, semelhante a um debounce. Não controla a ordem de execução antes do paint.
Alternativa E — ❌ Incorreta
useImperativeHandle: Personaliza o valor de ref exposto a componentes pai, permitindo acesso imperativo a métodos/funções. Não tem relação com o ciclo de execução antes da renderização visual.
PEGA ESSA DICA!
Sempre que precisar de efeitos que leiam ou meçam layout, ou que exijam que o DOM esteja atualizado antes do paint, use useLayoutEffect. Para a maioria dos outros efeitos (buscas de dados, subscriptions), useEffect é suficiente e mais performático.