Questão de Tecnologia da Informação · FGV TCE-SP 2023 (nº 59)

No React, alguns hooks permitem executar código em momentos específicos do ciclo de vida de um componente. A principal diferença entre useEffect e useLayoutEffect é quando o código dentro deles é executado em relação à atualização visual da tela pelo navegador.

• (A) Incorreta: useEffect executa o código de forma assíncrona, após o navegador ter pintado a tela. Se houver modificações no DOM que afetem o layout, o usuário pode perceber um "flash" visual antes da correção. Esta é a armadilha, pois useEffect é o hook mais comum para efeitos colaterais, mas não garante a execução antes da pintura.
• (B) Incorreta: useTransition é usado para marcar atualizações de estado como transições que podem ser interrompidas, priorizando outras atualizações urgentes. Não está relacionado ao momento de execução de um efeito em relação à pintura da tela.
• (C) Correta: useLayoutEffect executa o código de forma síncrona e antes de o navegador atualizar visualmente a tela. Isso é crucial para operações que precisam medir ou modificar o DOM e que devem ser refletidas imediatamente na renderização, evitando qualquer "flash" ou inconsistência visual.
• (D) Incorreta: useDeferredValue permite adiar a re-renderização de uma parte não urgente da UI, mostrando um valor anterior enquanto o novo valor está sendo calculado em segundo plano. Não controla o momento de execução de efeitos em relação à pintura.
• (E) Incorreta: useImperativeHandle é usado para personalizar o valor da instância que é exposto quando um componente pai usa uma ref para interagir com um componente filho. Não tem relação com a execução de código antes da atualização visual da tela.