Cada 33 milisegundos, quiero registrar los cambios realizados en un elemento de formulario. Necesito que esto se haga cada 33 milisegundos, porque intento grabar un "video" de un elemento de formulario registrando cambios en el elemento de formulario cada 33 milisegundos. En una página separada, mostraré estos cambios cada 33 milisegundos, dando la ilusión de un video.

Necesito usar el gancho useState en React. Al diagnosticar, descubrí que useState es tan lento que no puedo usarlo para registrar cambios en el intervalo de 33 ms. Cuando escribo texto rápidamente en el elemento de formulario, se retrasa considerablemente.

¿Hay alguna manera de registrar cambios en el elemento de formulario cada 33 milisegundos usando React? Puedo pensar en tres formas: encontrar una alternativa adecuada a useState, usar una solución de transmisión de video más nativa, alguna forma de subprocesamiento múltiple de javascript. Por favor, ayúdame.

 import React, { useState, useEffect } from 'react' const store = [] const Record2 = (props) => { const [seconds, setSeconds] = useState(0) const [data, setData] = useState("") const [capturing, setCapturing] = React.useState(false); const handleChange = (e) => { setData(e.target.value) } const handleClick = (e) => { setCapturing(oldCapturing => !oldCapturing) } useEffect(() => { console.log("store", store) const interval = setInterval(() => { if (capturing) { setSeconds(seconds => seconds + 0.033); store.push({ seconds, data }) console.log(store) } }, 33); return () => clearInterval(interval); }); return ( <div> <input onChange={handleChange} value={data}></input> <button onClick={handleClick}>{capturing ? "end capture" : "start capture"}</button> </div> ) } export default Record2