Questão nº 45
Questão de Tecnologia da Informação · FCC TRT20 2024 (nº 45)
Um desenvolvedor está criando uma aplicação React na qual o usuário pode inserir um texto e vê-lo imediatamente atualizado em tempo real em uma lista abaixo do campo de entrada. Para isso ele decide usar um estado local para armazenar o valor do campo de entrada e o conteúdo da lista. Nesse contexto, em condições ideais, a abordagem adequada para atualizar o estado quando o usuário digitar no campo de entrada é usar
- A`this.setState` em componentes funcionais para manter o estado atualizado a cada caractere digitado.
- B`setState` dentro de um componente de classe com `this.state.input` para atualizar o estado do campo.
- Co Hook `useEffect` para definir o valor de input toda vez que o campo tiver seu conteúdo alterado.
- Do Hook `useState` e atualizar o valor do estado diretamente no evento `onChange` do campo de entrada. (alternativa correta)
- E`useState` e `useEffect` em conjunto para garantir que o estado seja atualizado corretamente.
Resposta comentada
Gabarito Alternativa D
Em React, para que um campo de entrada (input) reflita o que o usuário digita e permita que o aplicativo reaja a isso, usamos o estado para controlar seu valor. Isso é conhecido como um componente controlado.
(A) Incorreta: `this.setState` é um método exclusivo de componentes de classe em React. Em componentes funcionais, que utilizam Hooks, ele não existe.
(B) Incorreta: Embora `setState` seja a forma correta de atualizar o estado em componentes de classe, a pergunta busca a abordagem ideal e mais moderna, que em React atual geralmente envolve Hooks para componentes funcionais.
(C) Incorreta: O Hook `useEffect` é usado para gerenciar efeitos colaterais (como requisições de API, manipulação direta do DOM, etc.) que ocorrem após a renderização. Ele não é a ferramenta adequada para atualizar diretamente o valor de um campo de entrada em resposta ao evento `onChange`, pois isso seria uma sobrecarga e poderia causar problemas de sincronização ou loops de renderização. Armadilha da banca: O uso de `useEffect` para qualquer tipo de "mudança" é um erro comum; ele é para efeitos de mudanças, não para a mudança primária do estado de um input.
(D) Correta: Esta é a abordagem padrão e recomendada em componentes funcionais do React. O Hook `useState` cria uma variável de estado (`inputValue`) e uma função para atualizá-la (`setInputValue`). O evento `onChange` do campo de entrada é o local ideal para chamar `setInputValue(event.target.value)`, garantindo que o estado seja atualizado imediatamente a cada caractere digitado e o campo reflita esse valor.
(E) Incorreta: Usar `useState` é correto, mas adicionar `useEffect` para uma simples atualização de valor de input é desnecessário e adiciona complexidade sem benefício. A atualização é direta e imediata via `onChange` com `useState`.
Fonte: FCC TRT20 2024 Técnico Judiciário - Área Apoio Especializado - Especialidade Tecnologia da Informação (Caderno Tipo 004). Reproduzida para fins de estudo.