If anyone’s reading this through search or the like, the error seems to come up when you’re improperly destructing variables with an undefined value in it const { value } = "undefined"; It could also be an issue with your react-redux connect function. More specifically, my error was mapping (mapStateToProps) an undefined value to props with redux-form.

To solve my issue, I had to remove entire components to see if my app would render correctly with or without them. Turned out to be a pretty good strategy after a few hours of headaches. This approach may help you isolate the issue. You’re most likely looking for undefined being passed along or assigned somewhere.

Overall, React is behaving correctly in this instance and you’ve overlooked a different possible issue. Good luck 💆

This is definitely a React bug though. There’s nothing Redux Form is doing that would be wrong. So if you can repro, please share a case!

@mgnrsb and everyone else:

If you only saw this error but didn’t see the original error (for example in @mgnrsb’s case it would be something like “Cannot read target property of null”) then you still have a problem, and some part of your code swallows exceptions.

The most common way to get this problem is when you use Promises and have a catch() block after you’re attempting to update the UI. If a component throws an error (due to mistake in your code) your catch() handler gets this error and tries to render the error in the UI, assuming it is a network error. However the UI is already broken at this point because of the earlier error (which you never surface) and this is why you get a confusing second error.

Be careful catching errors especially when dealing with Promises. It is very easy to accidentally catch errors in your own code.

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.

@viz We’re using redux-form v6.2.0 and react v15.4.0 with no issues at the moment. We’ve also been using redux-form v6.x since alpha with no issues from react.

I would go over and try to identify the exact source of the issue. Try removing components until you narrow it down. Then I’d advise checking all the variables you’re using in that component and making sure you’re not passing around undefined anywhere.

Or, as @gaearon suggested, provide an easy to follow example reproducing the issue.

We might want to look if it’s possible to have the invariant see correct numbers even if user code throws.

Here’s a fairly minimal project which reproduces this error in the test suite (shortly before the test legitimately errors out):

$ node --version
v4.4.6
$ npm --version
2.15.5
$ git clone git://github.com/wking/performUpdateIfNecessary-bug.git bug
$ cd bug
$ npm install
npm WARN optional dep failed, continuing fsevents@1.0.14
react@15.4.1 node_modules/react
├── object-assign@4.1.0
├── loose-envify@1.3.0 (js-tokens@2.0.0)
└── fbjs@0.8.6 (ua-parser-js@0.7.12, promise@7.1.1, isomorphic-fetch@2.2.1, core-js@1.2.7)

react-dom@15.4.1 node_modules/react-dom
├── object-assign@4.1.0
├── loose-envify@1.3.0 (js-tokens@2.0.0)
└── fbjs@0.8.6 (ua-parser-js@0.7.12, promise@7.1.1, isomorphic-fetch@2.2.1, core-js@1.2.7)

react-scripts@0.7.0 node_modules/react-scripts
$ npm test
…a…
…
  console.error node_modules/react-dom/node_modules/fbjs/lib/warning.js:36
    Warning: performUpdateIfNecessary: Unexpected batch number (current 2, pending 1)

But you can also get the batch error after typing into the input field.

I got this error when trying to access e.target.value from an event that bubbles up from an input element into a custom element. By the time I want to consume it, the event has already been reset to null.

const GeneralInput = ({ name, onChange }) => ( <input name={ name } onChange={ onChange } /> )

export default class OtherComponent extends Component {
  constructor (props) {
    this.state={}
    this._handleChange = this._handleChange.bind(this)
  }
  _handleChange (event) { this.setState({ [event.target.name]: event.target.value }) }
  render () { 
    return (
      <form onChange={ this._handleChange }>
        <GeneralInput name='firstname' value={this.state.firstname} />
      </form>
    )
  }
}

I solved it by calling e.persist() on the input element itself: const GeneralInput = ({ name, onChange }) => ( <input name={ name } onChange={ (e) => e.persist(); onChange(e) } /> )