enqueueCallback invariant should specify/identify actual object in failure message

[blainekasten]

Oddly enough, the two examples below are not equal as I thought they would be.

window.addEventListener(
  'resize',
  this.forceUpdate.bind(this)
);
// throws error

window.addEventListener(
  'resize',
  () => this.forceUpdate()
);
// works fine

The error is as follows:

Error: Invariant Violation: enqueueCallback(...): You called `setProps`, `replaceProps`, `setState`, `replaceState`, or `forceUpdate` with a callback that isn't callable.

I'm assuming that is because the function as assuming an optional callback. But I would expect your code to do a typeof check, and not just a defined check. Can we change it to do a typeof fn === 'function' check? I can submit a PR.

[zpao]

Well, the typecheck happens with that exact typecheck, just not directly in forceupdate. Here's forceUpdate: https://github.com/facebook/react/blob/master/src/renderers/shared/reconciler/ReactUpdateQueue.js#L109-L114 and where the invariant happens: https://github.com/facebook/react/blob/master/src/renderers/shared/reconciler/ReactUpdateQueue.js#L109-L114

FWIW, this.forceUpdate.bind(this) is not the same as () => this.forceUpdate() due to an important distinction. The former makes a new function that is bound but it will pass along any arguments. The latter also is a new function but it explicitly doesn't pass any arguments. So the former gets the event passed along while the latter just drops it. The event isn't callable, thus the invariant.

We need to do the typecheck so I guess we could discuss whether we keep it as an invariant or a warning. But it is a misuse of the API.

[jimfb]

To follow up on that, the more "equal" thing would be:

window.addEventListener(
  'resize',
  (e) => this.forceUpdate(e)
);

Which should throw the same error that you see with your first bind example.

[blainekasten]

Correct. Yes, I understand all of that. It wasn't toooo hard for me to understand what is happening. And it is a misuse of the API. So I guess, I would consider adding the argument type to the invariant to help make it clearer?

Something more like:

enqueueCallback(...): You called `setProps`, `replaceProps`, `setState`, `replaceState`, or `forceUpdate` with an argument of type {typeof arg}. A function is expected.

It's kind of moot. But It confused me for a second. Might confuse others also.