Questão nº 61

Questão de Tecnologia da Informação · FGV TRF1 2024 (nº 61)

FGV2024Técnico Judiciário - Desenvolvimento de SistemasTecnologia da Informação

Considere o seguinte código de uma aplicação React:
import React, {useState, useEffect} from 'react';
const CVinteUm = () => {
const [estado, setEstado] = useState(0);
let variável = true;
useEffect(() => {
new Promise(r=>{r()})
.then(()=>setEstado(e=>e+'10'))
return () => { variável = false; };
}, []);
return <div>{"${estado} ${variável}"}</div>
}
export function App(props) {
return (<CVinteUm />);
}
Ao ser executado em um browser web, após completadas as renderizações, o componente App exibe:

Anada;
Bo texto "0 false";
Co texto "010 true"; (alternativa correta)
Do texto "010 false";
Euma mensagem de erro.

Resposta comentada

Gabarito Alternativa C

Quando um componente React é renderizado, todas as variáveis declaradas diretamente em seu corpo são inicializadas a cada nova renderização. O hook useEffect executa sua função após a renderização inicial e sua função de limpeza (retornada pelo useEffect) só é executada quando o componente é desmontado ou antes de uma nova execução do próprio useEffect (se as dependências mudarem).

(A) Incorreta: O componente sempre renderiza algo, não fica vazio.
(B) Incorreta: O estado estado é modificado assincronamente e a variável variável é re-inicializada em cada renderização.
(C) Correta: Na primeira renderização, estado é 0 e variável é true. O useEffect é disparado, e a Promise resolve imediatamente, chamando setEstado(e=>e+'10'). Isso atualiza estado para "010" (concatenação de string) e dispara uma nova renderização. Na segunda renderização, estado é "010". A variável variável é re-declarada e re-inicializada como true para esta nova renderização. A função de limpeza do useEffect (que mudaria variável para false) não é executada porque o componente não foi desmontado e o useEffect não está sendo re-executado (devido ao array de dependências vazio []). Assim, o resultado final é "010 true".
(D) Incorreta: Esta é a pegadinha. A variável variável é uma variável local do componente e é re-inicializada para true em cada renderização. A função de limpeza do useEffect só seria executada quando o componente fosse desmontado (ou se o useEffect fosse re-executado com dependências diferentes), e mesmo que fosse, ela modificaria a variável da renderização anterior, não a variável da renderização atual que está sendo exibida.
(E) Incorreta: O código é sintaticamente correto e não há erros de execução.

Fonte: FGV TRF1 2024 Técnico Judiciário - Desenvolvimento de Sistemas (Caderno Tipo 1). Reproduzida para fins de estudo.

Questão de Tecnologia da Informação · FGV TRF1 2024 (nº 61)

Resposta comentada

Continue estudando