Bug: Some transition updates haven't been rendered

[zh-lx]

React version: 18.0.0

Steps To Reproduce

1. Write a react component with the following code:

import React, { useState, startTransition } from 'react';

export default function App() {
  const arr = Array(9999).fill(1);
  const [value, setValue] = useState(0);
  const handleInputChange = (e) => {
    console.log(e.target.value);
    startTransition(() => {
      setValue(e.target.value);
    });
  };
  const getValues = () => {
    return arr.map((item, index) => {
      return (
        <div key={index}>
          {value}-{index}
        </div>
      );
    });
  };
  return (
    <div>
      <input type="text" onChange={handleInputChange} />
      <div>{getValues()}</div>
    </div>
  );
}

2. input content in the <input /> at a very fast speed.
3. As shown in the figure below, all the contents I entered for the first time have been rendered. But the second time I input 216948261894, only 216948 is rendered, and the following characters are not rendered.
   

Link to code example:

https://codesandbox.io/s/react18-starttransition-5u1en2?file=/src/App.js

The current behavior

As shown in the figure below, all the contents I input for the first time have been rendered. But the second time I input 216948261894, only 216948 is rendered, and the following characters are not rendered.

The expected behavior

Everything I input should be rendered.

[gaearon]

I can reproduce this if I type very very very fast. It's worth noting that the input is uncontrolled, so there's nothing wrong with the startTransition call here. It's just that we seem to drop some state updates.

[zh-lx]

I can reproduce this if I type very very very fast. It's worth noting that the input is uncontrolled, so there's nothing wrong with the startTransition call here. It's just that we seem to drop some state updates.

I have debugged the react source code for a long time. What I can confirm is that all onChange events and setState are executed normally, and the corresponding update is created for each input.

[gaearon]

I think we want to see if that’s the case of an update getting “dropped” from the update queue somehow, or if it’s the case of “forgetting” to commit it.

[zh-lx]

All updates have executed enqueueUpdate api, I guess that’s the case of an update getting “dropped” from the update queue somehow. By printing the log in enqueueUpdate, I found that after the interleavedUpdate was fully executed, the pending update was not rendered.

The code of my print log is as follows:

 function enqueueUpdate<S, A>(
  fiber: Fiber,
  queue: UpdateQueue<S, A>,
  update: Update<S, A>,
  lane: Lane,
) {
  if (isInterleavedUpdate(fiber, lane)) {
+   console.log('isInterleavedUpdate')
    const interleaved = queue.interleaved;
    if (interleaved === null) {
      // This is the first update. Create a circular list.
      update.next = update;
      // At the end of the current render, this queue's interleaved updates will
      // be transferred to the pending queue.
      pushInterleavedQueue(queue);
    } else {
      update.next = interleaved.next;
      interleaved.next = update;
    }
    queue.interleaved = update;
  } else {
+   console.log('pending')
    const pending = queue.pending;
    if (pending === null) {
      // This is the first update. Create a circular list.
      update.next = update;
    } else {
      update.next = pending.next;
      pending.next = update;
    }
    queue.pending = update;
  }
}

The printed log is shown in the figure below：

I hope this is helpful in troubleshooting problems.

[acdlite]

My hunch is that it's a bug with the "interleaved updates" check causing the updates to be enqueued in the wrong order

[acdlite]

I suspect if you add a enqueueInterleavedUpdates call at the top of the else block it would fix it. Do you mind trying that and see if you're still able to reproduce?

 function enqueueUpdate<S, A>(
  fiber: Fiber,
  queue: UpdateQueue<S, A>,
  update: Update<S, A>,
  lane: Lane,
) {
  if (isInterleavedUpdate(fiber, lane)) {
    const interleaved = queue.interleaved;
    if (interleaved === null) {
      // This is the first update. Create a circular list.
      update.next = update;
      // At the end of the current render, this queue's interleaved updates will
      // be transferred to the pending queue.
      pushInterleavedQueue(queue);
    } else {
      update.next = interleaved.next;
      interleaved.next = update;
    }
    queue.interleaved = update;
  } else {
+   enqueueInterleavedUpdates();
    const pending = queue.pending;
    if (pending === null) {
      // This is the first update. Create a circular list.
      update.next = update;
    } else {
      update.next = pending.next;
      pending.next = update;
    }
    queue.pending = update;
  }
}

[acdlite]

^ that's not an appropriate fix, btw, because it has other consequences, but if it works that tells us what the issue is

[acdlite]

I believe this will fix it. Going to a meeting but will check after: #24353

[acdlite]

Confirmed that #24353 fixes this: https://codesandbox.io/s/react18-starttransition-forked-dzyyzb?file=/package.json

Thanks so much for the bug report!

[gaearon]

Fix out in 18.1.0. Thanks again for a great report.