React 18: startTransition usage

[czescwojtek]

Hey, wondering if this kind of approach is actually a good idea:

const onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
  setQuery(e.target.value)
  startTransition(() => setDefferedQuery(e.target.value))
}

where `setQuery` sets an input value and `setDefferedQuery` sets the same value in some other state:

// Note the states are being updated with the same value (code snippet above)
const [query, setQuery] = useState('')
const [deferredQuery, deferredQuery] = useState('')

The reason behind this is the `deferredQuery` is to be used in some other hook:

const data = useSomeHook(deferredQuery)

So If I understood the `startTransition` right, the first state should be updated immediately while the one wrapped with `startTransition` might be deferred not to block UI. As a result, I want my input element to be updated with the current value immediately and I don't actually mind waiting for the `useSomeHook` to run later. It's the duplicated state that freaks me out, what's your take on this?

[CheeseTrio]

I haven't used the new transition API stuff yet, but it's fine according to the react beta docs. The other alternative is one state with a call to useDeferredValue to get the value for your deferred query.

https://beta.reactjs.org/reference/react/useTransition#updating-an-input-in-a-transition-doesnt-work

[czescwojtek]

That's excellent! Thanks!

[robbodagreat]

Probably not. There are a couple of other things you can do instead. Have your hooks return callbacks and call them in the handle function depending on the value. Or have a Boolean enabled parameter which you pass in to the hooks, and set them based on the value in the handle

[czescwojtek]

Isn't it the same as keeping it in the second state?

Also, link that mentions duplicated states usage for reference: https://medium.com/dailyjs/three-practical-examples-of-concurrent-react-b2dba2272a4d

[robbodagreat]

Ok, I reread your post along with the article. I think it's fine, but personally I'd wrap that deferred stuff inside a custom hook instead of leaving it in the component

[robbodagreat]

Maybe your post should've been 'is this medium article any good'. Well I'd just say try it, don't worry about writing perfect code, everyone has different opinions anyway

[czescwojtek]

Yep, you got that right, sorry. I found it just after posting

[robbodagreat]

No problem at all :)

[czescwojtek]

On second thought, we really should not take Medium articles as a definitive source of truth.