Cómo configurar useState const al valor de la entrada en el cambio

Question

digamos que creé una variable en un componente funcional así:

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

¿Cómo podría cambiar este valor en función de lo que un usuario ingresa en una entrada? Mi idea fue esta:

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

Pero no sabe qué valor es, ¿cómo puedo obtener el valor en mi variable quizName?

Answer 1

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

Answer 2

la forma más sencilla es tener una función en onChange de entrada como:

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

¡Está bien !, ¡Pero por favor, por el amor de DIOS, por favor deja de hacer esto!

Esta es la razón:

¡está creando una función en cada cambio de entrada y ejecutándola! ¡Esto no está bien con el tornillo de banco de rendimiento! ¡especialmente si lo hace en una aplicación a gran escala en todas partes de sus componentes!

lo que debe hacer es usar useCallbackcomo se muestra a continuación:

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

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


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

aquí hay una descripción de las useCallbackdocumentaciones en react:

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

Answer 3

onChange={setQuizName(value)}

Cuando llama a la función de esta manera, se ejecutará sin esperar a que la cambie.

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

es la forma correcta de hacerlo