Como definir useState const para o valor de entrada na mudança

Question

Digamos que eu criei uma variável em um componente funcional assim:

const [quizName, setQuizName] = useState("");

Como eu poderia alterar esse valor com base no que o usuário insere em uma entrada. Minha ideia foi esta:

<input
    value={quizName}
    onChange={setQuizName(value)}
></input>

Mas ele não sabe o que é o valor, como posso obter o valor em minha variável quizName?

Answer 1

<input
    value={quizName}
    onChange={(e)=>setQuizName(e.target.value)}>
</input>

Answer 2

a maneira mais simples é ter uma função em onChange de entrada como:

<input value={quizName} onChange={(e)=>setQuizName(e.target.value)} />

Está tudo bem! Mas, por favor, pelo amor de Deus, pare de fazer isso!

Aqui está o motivo:

você está criando uma função em cada mudança de entrada e executando-a! isso não é bom para o desempenho do torno! especialmente se você fizer isso em um aplicativo de grande escala em todos os lugares em seus componentes!

o que você precisa fazer é usar useCallbackcomo abaixo:

const [quizName, setQuizName] = useState("");

const handleInputChange = useCallback((e) => {
   setQuizName(e.target.value)
}, [setQuizName])


return (
   <input value={quizName} onChange={handleInputChange} />
)

aqui está uma descrição das useCallbackdocumentações in react:

https://reactjs.org/docs/hooks-reference.html#usecallback

Answer 3

onChange={setQuizName(value)}

Quando você chama a função assim, ela será executada sem esperar que você a altere.

onChange={(e) => setQuizName(e.target.value)}

é a maneira correta de fazer isso