Error: performUpdateIfNecessary: Unexpected batch number ...

From maintainers: if you have this problem, please see the explanation in #6895 (comment).

I am getting a strange error I've never come across. Googling it doesn't help at all.
Error: performUpdateIfNecessary: Unexcpeted batch number (current 36, pending 31)(...)
It has caused me a lot of headaches. I've reverted to 2 days ago and the error persists, even though 2 days ago everything was running smoothly and all tests were passing.

I would appreciate any sort of direction as to how I can begin to resolve this bug. My guesses are that it's an error with Redux, Webpack, Redux-Form, or React itself. I know, not that precise, but I'm quite lost.

Example redux logger information:

Max OS X, El Capitan 10.11.5
React v15.0.1 (error persists on v15.1.0)

I'm sorry if this isn't specific to React. I did look into the error message code and it appears to be coming from the Facebook/React code.

Thanks!

If you scroll up, are there any earlier errors before these ones? You can see them in the error field in Redux logger.

No, those are the first errors.

I'm using react hot loader 3-beta.1 and when I hide and show the side logger I can reproduce the same error over and over.

I think it's an error with one of my dependencies, but not sure which one. Postcss/autoprefixer and redux-form are back on my list of guesses.

edit: I've reverted back 2 weeks and get the same error. I think it has to be my OS or a dependency is failing.

Does npm ls react show only one copy of React? Can you create a minimal project reproducing the problem?

└── UNMET PEER DEPENDENCY react@15.1.0

npm ERR! peer dep missing: react@^0.14.8, required by react-addons-css-transition-group@0.14.8
npm ERR! peer dep missing: react@^0.14.8, required by react-addons-test-utils@0.14.8
npm ERR! code 1

My package.json specifies "react": "^15.1.0",

Ugh, npm ls react breaks because of peer deps. What’s confusing though is you seem to have react-addons-css-transition-group@0.14.8 and react-addons-test-utils@0.14.8. Can you please update these packages to 15.1.0 as well and make sure they don’t contain node_modules/react inside themselves?

Okay, I've upgraded both packages and checked their respective folders in node_modulesto see if they contain their own node_modules/react (which they don't).

"react-addons-css-transition-group": "^15.1.0",
"react-addons-test-utils": "^15.1.0",

npm ls reactnow returns
└── react@15.1.0

I still seem to be getting the same error

Cool. Still having the same issue? At this point only a reduced example would help.

@gaearon

I reverted back even further and it finally works. The major package changes were redux-form (v5 -> v6) and some smaller stuff.

Going to keep trying out different packages until I find out what was throwing the issue. Hopefully I post back here soon with the solution for the rare chance someone else has a similar problem.

Thanks a lot for the help! @gaearon

@brotzky

This sounds like it is probably a bug in React. That invariant is new; it was added in 15.1.0, which was released six days ago. #6650

@brotzky If you can provide a reproducible test case, that would be super helpful. Even if it is part of a larger codebase that you can share (my guess is it is going to be super hard to isolate that example).

cc @spicyj

Yes, if you can post something that reproduces the problem it would be very helpful.

Yes, we updated to 15.1.0 yesterday, May 25th. That was when we started getting these new errors.

I will see if I can isolate the issue, but it's very hard to track down. That's the only error message I get. This doesn't break all components, only ones on a specific view. For example, it's the only view that uses <ReactCSSTransitionGroup />.

Here's an entire log I get from start to finish.

Ive just removed the redux-form component from the page and it loads fine.
redux-form@6.0.0-alpha.13

Will continue looking into this. It seems my original suspicion was correct.react@15.1.0 isn't playing nicely with redux-form@6.0.0-alpha.13

@erikras

@erikras Ever seen this?

@erikras

@erikras, when I specifically remove the

<Field
    name="inputName"
    component={inputName => 
     ...
}/>

Everything works as expected.

On Thu, Nov 24, 2016 at 04:50:27AM -0800, Dan Abramov wrote: The reproducing code is a bit convoluted…

It makes a bit more sense before you boil it down that far ;). The full version of that code is a graph of issues for each requested slug, so there's a recursive slug-fetcher. The nested atomic state pivots allow me to avoid duplicate parallel calls [1]. [1]: https://github.com/wking/depviz/blob/f6a6915afbc73daf9ad4fd64a09dfcd708a4adfa/webapp/src/DepGraph.js#L32-L60

GetNodes: Shuffle around to return an array of nodes

Was able to "reproduce" this issue by simple:

componentWillUnmount(){
        throw "bbbb";
}

There was no other indication for the generated exception, OP's error ensured.

I got this issue with react-redux-form + React Autocomplete by setting the initial state for a form to be null rather than ''. (Which I really wanted... but it didn't work... oh well set it back to '' and everything "fixed".

I can reproduce a case, likely similar to the original.

OnsenUI 2.0.5 Lazylist does not render and gives the "performUpdateIfNecessary: Unexpected batch number" error after upgrading to Leaflet 1.0.2 & React-Leaflet 1.1.0.

Going back to legacy Leaflet 0.7.7 alleviates the error, and the Lazylist component functions correctly.

In both cases react version was 15.4.2.

This may be out of context, but I came to this issue, because this message popped up while I did a stupid mistake in my React Native code
Inside the view for an onPress event I did this
onPress={methodName}
instead of
onPress={methodName()}
Posting this just in case help anyone else save some time.

This message popped up when I was working with a SELECT on Redux-Form. Initially, my SELECT was initialised with an empty array as options. But, accidentally, on my action creator I made this:

--> let staticData = {}; <--
  switch(Number(countryId)) {
    case 1:
      staticData = [
        { id: 1, name: 'XPTO1'},
        { id: 2, name: 'XPTO2'}      
      ];
      break;
  }

return {
      type: FETCH_KEY,
      payload: {
        data: staticData
      }
  };

This was changing the initial type from Array to Object which was unexpected by my reducer & view. After changing the highlighted line to
--> let staticData = []; <--
It started working fine.

Redux-Form: 6.1.1 & React 15.3.2

This error

Error: performUpdateIfNecessary: Unexpected batch number

appears at some component after error (see #4026)

Uncaught TypeError: Cannot read property '_currentElement' of null

appears in another component if it have crash at render() method (for example caused by (undefined).x code)

both components is not parent of each other

In this thread, everybody seems to be enumerating all the different possible errors in JavaScript apps. However they are not relevant to solving the issue, and are not helpful to others. This thread focuses on symptoms, but the underlying cause has been explained several times in this and other threads. I'm going to lock this thread to reduce the noise and help people finding this on Google focus on the solution rather than the symptom.

I have explained the solution in #7617 (comment) so please read that comment. This problem most commonly occurs with Promises, but can occur in any code where you catch exceptions and don't log them.

If you see a cryptic error like this it always means there is an earlier error from your component code that causes React to break. You need to scroll your console up and find the original error.

If you don't see an earlier error in your own components, it means that your code is swallowing errors. This is very common if you use catch() with Promises and accidentally swallow errors inside React. I've also seen this with other libraries, like Redux Saga, where people just catch any error without checking if it's a network failure or something else. Some third party libraries may also swallow your errors. I recommend to enable "Break on All Exceptions" in your debugger, and then when the error throws, check the call stack to find who's silently catching your error.

Again, this error itself is just an irrelevant symptom.
You need to figure out why your code crashes in a component, and which catch swallows the crash.

The fact that React produces cryptic errors on next updates after a component crash is unfortunate, and we'll fix this in next versions of React. However, in any case, you need to fix the underlying problem (your code crashing) first.

If you're sure it's a bug in React please file a new issue with a minimal reproducing test case.

A small update on this. We just released React 16 beta which shouldn’t emit cryptic errors like this one. Even if the application code swallows an error, React 16 will still print it to the console. It might be too early for you to try React 16 (since ecosystem is still preparing for it), but this error should never occur in the future after you switch to it.

Navigation Menu

Repository navigation

Error: performUpdateIfNecessary: Unexpected batch number ... #6895

From maintainers: if you have this problem, please see the explanation in #6895 (comment).

41 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Error: performUpdateIfNecessary: Unexpected batch number ... #6895

Description

From maintainers: if you have this problem, please see the explanation in #6895 (comment).

Activity

gaearon commented on May 26, 2016

brotzky commented on May 26, 2016

gaearon commented on May 26, 2016

brotzky commented on May 26, 2016

gaearon commented on May 26, 2016

brotzky commented on May 26, 2016

gaearon commented on May 26, 2016

brotzky commented on May 26, 2016

jimfb commented on May 26, 2016

sophiebits commented on May 26, 2016

brotzky commented on May 26, 2016

brotzky commented on May 26, 2016

gaearon commented on May 26, 2016

brotzky commented on May 26, 2016

41 remaining items

wking commented on Nov 24, 2016

romansky commented on Dec 21, 2016

zargold commented on Jan 20, 2017

mcku commented on Jan 23, 2017

ivks commented on Jan 25, 2017

osilvaa commented on Jan 25, 2017

oklas commented on Feb 21, 2017

gaearon commented on Feb 21, 2017

gaearon commented on Jul 27, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions