FC ConcursosFC Concursos

Questão FC373454

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. Pa

Desenvolvimento Web

FCC · 2024

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

  1. this.setState em componentes funcionais para manter o estado atualizado a cada caractere digitado.
  2. setState dentro de um componente de classe com this.state.input para atualizar o estado do campo.
  3. o Hook useEffecr para definir o valor de input toda vez que o campo tiver seu conteúdo alterado.
  4. o Hook useState e atualizar o valor do estado diretamente no evento onChange do campo de entrada.
  5. useStat e useEffecr em conjunto para garantir que o estado seja atualizado corretamente.
Mostrar resposta e comentário

Gabarito

D

Comentário do professor

A alternativa correta indica usar o Hook useState e atualizar o valor do estado diretamente no evento onChange do campo de entrada. Em componentes funcionais, useState cria uma fonte única de verdade para o valor do input, retornando o par [valor, setValor] que permite atualizar o estado imediatamente.

Ao ligar onChange a uma função que chama setValor(e.target.value), o React re-renderiza o componente com o novo texto, garantindo que a lista abaixo reflita em tempo real o conteúdo digitado. Isso transforma o input em um controlled component, com comportamento previsível e sincronia entre UI e estado.

Exemplo resumido:
const [text, setText] = useState('');
setText(e.target.value)} />

    {text &&
  • {text}
  • }

Conteúdo do catálogo FC Concursos · Atualizado em

Continue aprendendo