useDeferredValue React not showing

[swimmer]

I have an input box that when a user puts in information in it.
There is a lag time until the letters are populated correctly in the input box

The reason is that there’s some kind of a function in the background that takes a lot of resources to calculate the information in the input box.

In my case the function name is

onEditData({ field, id, value})

In order to bypass this issue I decided to use the new feature in React 18

useDeferredValue
however when a user types text in the input box nothing changes.

I am not sure what I did wrong?
You can find my code at

function CheckBreakdown() {


  const [checkRegular, setCheckRegular] = useState([])
  const deferredCheckRegular = useDeferredValue(checkRegular)

  useEffect(() => {


    setCheckRegular(obj.CheckRegular)
  }, [])

 
  // a breakdown of the check info
  const handleChange = (e) => {

    setCheckRegular(e.target.value)
    let field = 'CheckRegular'
    onEditData({ field, id, value: deferredCheckRegular })

  }

  return (

    <div className="inPutSalesTable">
      <div  >
        <Form.Label htmlFor="regularCheck#">Regular check #</Form.Label>
        <Form.Control
          type="text"
          id="regularCheck#"
          value={deferredCheckRegular}
          field="CheckRegular"
          onChange={handleChange}
        />

      </div>
      <div>
        <Form.Label htmlFor="vatCheck#">Vat check #</Form.Label>
        <Form.Control
          value="John"
          type="text"
          id="vatCheck#"
        />
      </div>

    </div>
  )
}

Thank you for your help

[lasjorg]

You are using data and functions we do not have access to. But the deferred value part should work. It did in my brief test.

Please post a live example or a GitHub repo.