Every 33 milliseconds, I want to record changes made to a form element. I need this done every 33 milliseconds, because I am attempting to record a "video" of a form element by recording changes to the form element every 33 milliseconds. On a separate page, I will render these changes every 33 milliseconds, giving the illusion of a video.

I need to use the useState hook in React. On diagnosing, I have found that useState is so slow that I cannot use it to record changes the 33ms interval. When I rapidly type text into the form element, it lags considerably.

Is there a way I can record changes to the form element every 33 milliseconds using React? I can think of three ways - finding a suitable alternative to useState, using a more native video streaming solution, some form of javascript multi-threading. Please help me.

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