Estoy codificando un cliente de Reddit simple en JavaScript usando React, y tengo un elemento en mi encabezado que cambia el subreddit que se mostrará, con el rebote de Lodash aplicado dentro del gancho useMemo de React para evitar llamadas handleChange excesivas mientras se escribe.

Sin embargo, cuando la propiedad de valor del elemento de entrada se establece en la variable useState adecuada, la entrada se vuelve imposible de modificar.

Este es el código que funciona, aunque con limitaciones que espero superar:

 import React, { useMemo } from 'react'; import debounce from 'lodash.debounce'; export const Header = ({ subreddit, setSubreddit }) => { const handleChange = ({ target }) => { setSubreddit(target.value) } const debouncedHandleChange = useMemo(() => { return debounce(handleChange, 500) }, []) return ( Superliminal/ <input type='text' onChange={debouncedHandleChange} placeholder={subreddit} autofocus/> ) }

Las cosas se vuelven problemáticas cuando defines la propiedad de valor del elemento de entrada de la siguiente manera: value={subreddit}

Actualmente, no entiendo por qué esto hace que la entrada se vuelva inalterable, y preferiría que el valor, y no solo el marcador de posición, permanezca igual a la variable de estado de subreddit. Especialmente no entiendo porque sin la implementación de rebote, puede definir el valor como la variable de estado sin problemas.

Si es necesario, el código en el archivo App.js para configurar el subreddit es simplemente:

 import React, { useState } from 'react' import { Header } from './components/Header/' function App() { const [ subreddit, setSubreddit ] = useState('all') return ( <> <Header subreddit={subreddit} setSubreddit={setSubreddit} /> </> ) }

¿Podría alguien explicarme por qué mi código no funciona según lo previsto y ayudarme a solucionarlo?

¡¡Gracias por adelantado!!