React: Firefox issue: Expected flush transaction's stored dirty-components length to match dirty-components array length.

[saifelse]

I was able to come up with a repro for this bug that does not rely on weird interactions between JS and Flash, though it only happens in Firefox: http://jsfiddle.net/bzrppsym/3/

A summary of the repro is that if you have a React component that is updating itself via a setInterval loop and an INPUT that is focused, and you zoom in/out to trigger a resize handler which re-renders the React component, the error is triggered.

Note: that this only happens in Firefox and if the INPUT is focused. This does not seem to happen in Chrome. The same workaround suggested in #4958 also applies, i.e. wrapping the resize handler body in a setTimeout.

[sophiebits]

Reproed. This is either a React bug or a Firefox bug.

[SBRK]

Any update on this ? I'm having the exact same symptoms :

• Firefox
• Input field focused
• Resizing the page, which triggers an update of some of my states and a re-render

[gaearon]

I can also reproduce this with 15.3.0.
Would you like to dive into it and figure out why this happens?

[Andarist]

@gaearon
This is happening because Firefox has a strange bug - its resize events fire whenever they happen, they are not scheduled via event loop, just happening instantly. What does it mean? Concurrency problems ofc, because 2 functions can run at the same time in single javascript context ( :O ). Behaviour can be checked here - https://jsfiddle.net/bzrppsym/6/ . When u meet the debugger resize your window and observe console.logs from resize listener flooding your console.

So in the original issue this happens because there are 2 concurrent rerenders running and there is probably problem because they use the same internal state.

Same thing happens in Chrome for visibilitychange event too.

However - I have no idea yet why this happens here only when the input (which is not even controlled by React!) has focus.

[Andarist]

Providing such workaround seems to prevent the issue.

Couldnt reproduce this by manually resizing, probably due to too less frequent setState calls, but by causing the resizes programatically really quickly the issue surfaced quite frequently before the fix and disappeared completely after introducing the workaround.

Used snippet:

const el = document.getElementById('iframe-with-react-textarea-autosize');
setInterval(() => {
  const side = (Math.random() * 1000) + 'px'
  el.style.setProperty('width', side)
  el.style.setProperty('height', side)
}, 0)

[gaearon]

This error doesn’t exist in React 16 so it can’t happen.
If you see some different error instead please file a new issue with instructions to reproduce.
Thanks!