Question: startTransition behavior

[hnordt]

I'm very sorry that I'm using the issue tracker to ask this question, but I think others might ask the same question after reading reactwg/react-18#41 (I don't have commenting rights).

function handleInputChange(e) {
  const input = e.target.value

  setInputValue(input)

  startTransition(() => {
    setSearchQuery(input)
  });
}

What happens if the user types "ab"? i.e.:

// pseudocode representing the first event handler triggered by keystroke "a"
setInputValue("a")
startTransition(() => setSearchQuery("a"))

// pseudocode representing the second event handler triggered by keystroke "b"
setInputValue("ab")
startTransition(() => setSearchQuery("ab"))

From my understanding setInputValue("a") and setInputValue("ab") will batch generating a single rerender, the callback () => setSearchQuery("a") passed to the first startTransition will be cancelled, and only the second callback () => setSearchQuery("ab") passed to the second startTransition will be executed. i.e.:

// pseudocode representing the final logic after keystrokes "a" and "b"

setInputValue("a") // will batch with `setInputValue("ab")`
startTransition(() => setSearchQuery("a")) // noop, this callback will be cancelled

setInputValue("ab")
startTransition(() => setSearchQuery("ab"))

Am I correct?

I think this question is important because if the first callback passed to startTransition really gets cancelled and I try to do more work inside it, I should have in mind that the additional work will not happen.

cc @gaearon @acdlite

[gaearon]

I think there's a bit of a confusion here — setTransition does not "schedule" a callback inside of it, so there's nothing to be cancelled. Let me illustrate this:

console.log('1')
startTransition(() => {
  console.log('2')
  setSearchQuery('hello')
})
console.log('3')

This logs: 1, 2, 3.

The function you run to startTransition does not get scheduled for later. It executes immediately. It's the state updates scheduled during startTransition that get handled differently. React "marks" them as being inside a transition, and that influences how they get rendered later.

Pseudocode:

let isInTransition = false

function startTransition(fn) {
  isInTransition = true
  fn()
  isInTransition = false
}

function setState(value) {
  stateQueue.push({
    nextState: value,
    isTransition: isInTransition
  })
}

The function is called immediately but setStates scheduled during it get marked as transitions.

Does this answer your question?

[hnordt]

Thank you for the great explanation @gaearon!