Questão de Programação — Desenvolvimento Mobile — VUNESP 2024

React: cronômetro com useState e setInterval

Gabarito: letra E. O código exibe um cronômetro que inicia uma contagem em segundos somente após o usuário acionar o botão "Clique Aqui" — é o que descreve a alternativa E. A lógica típica usa useState para guardar o valor do contador e setInterval para incrementá-lo a cada segundo, mas o setInterval só é disparado dentro do handler do botão, ou seja, a contagem não começa no carregamento do aplicativo.

O React é uma biblioteca JavaScript para construção de interfaces de usuário, baseada em componentes. Um componente funcional pode usar hooks — funções especiais que permitem "ligar" o componente ao estado e ao ciclo de vida do React. Os dois hooks centrais para este código são:

• useState: retorna um par [valor, funçãoAtualizadora]. O valor é o estado atual (ex.: contador), e a funçãoAtualizadora (ex.: setContador) é usada para alterá-lo. Toda vez que o estado muda, o componente é re-renderizado com o novo valor.

• useEffect: permite executar efeitos colaterais, como setInterval, setTimeout, chamadas a APIs, etc. Ele recebe uma função e uma lista de dependências. Se a lista for vazia [], o efeito roda apenas uma vez após a montagem; se houver dependências, roda sempre que elas mudarem.

No código da questão, o padrão mais comum é:

const [contador, setContador] = useState(0);

function iniciar() {
  setInterval(() => {
    setContador(c => c + 1);
  }, 1000);
}

Aqui, o setInterval está dentro da função iniciar, que é chamada pelo onClick do botão. Portanto, a contagem só começa quando o usuário clica. Se o setInterval estivesse dentro de um useEffect com [], ele começaria automaticamente ao carregar a página — mas não é o caso descrito.

A pegadinha da banca está em confundir cronômetro com relógio. Um relógio exibe a hora atual (obtida com new Date() ou Date.now()), atualizada a cada segundo ou minuto. Um cronômetro, por outro lado, conta o tempo a partir de um ponto inicial (geralmente zero), incrementando a cada segundo. As alternativas A, B e C falam de "horário corrente" (relógio), enquanto D e E falam de "contagem em segundos" (cronômetro). Além disso, a diferença entre D e E é o momento de início: D diz que começa ao carregar, E diz que começa após o clique. Como o setInterval está no handler do botão, a resposta correta é E.

Alternativa A — ❌ Incorreta

Afirma que é exibido o horário corrente de forma estática, atualizado apenas quando o botão é acionado. Isso descreveria um relógio que só atualiza no clique, mas o código usa setInterval, que atualiza automaticamente a cada segundo — não apenas no clique. Além disso, o valor exibido é um contador que começa em zero, não o horário corrente.

Alternativa B — ❌ Incorreta

Diz que é um relógio com horário corrente atualizado em tempo real a cada segundo, após o clique. O erro está em chamar de "relógio" e "horário corrente": o código exibe um cronômetro (contagem a partir de zero), não a hora atual. O intervalo de atualização (1 segundo) está correto, mas o tipo de exibição não.

Alternativa C — ❌ Incorreta

Semelhante à B, mas com intervalo de "a cada minuto". O código usa setInterval com 1000 ms (1 segundo), não 60000 ms (1 minuto). Além disso, continua sendo um cronômetro, não um relógio.

Alternativa D — ❌ Incorreta

Esta alternativa acerta ao dizer "cronômetro" e "contagem em segundos", mas erra no gatilho: afirma que a contagem inicia assim que o aplicativo é carregado. No código, o setInterval está dentro do handler do botão, então a contagem só começa após o clique. A alternativa D inverte o momento de início.

Alternativa E — ✅ Correta ⟵ GABARITO

Descreve exatamente o comportamento: um cronômetro que inicia a contagem em segundos após o usuário acionar o botão "Clique Aqui". O setInterval é disparado no onClick, incrementando o contador a cada segundo. É a única alternativa que combina o tipo (cronômetro) e o gatilho (após o clique) corretamente.

Gabarito: letra E