react: useEffect causes 'callback is not a function' exception
Do you want to request a feature or report a bug? Bug
What is the current behavior?
useEffect
results in the following exception in the console:
Uncaught TypeError: callback is not a function
at flushFirstCallback (scheduler.development.js:348)
at flushWork (scheduler.development.js:441)
at MessagePort.channel.port1.onmessage (scheduler.development.js:188)
I am unable to isolate the problem enough to create a sandbox that reproduces it. I am posting it here in case there is still some value in it (it seems slightly related to https://github.com/react-navigation/react-navigation/issues/5851, https://github.com/gaearon/overreacted.io/issues/460 and even https://github.com/facebook/react/issues/15194). This is my component:
const RemoteControlledSliderRaw = ({ activeIndex, currentlyDragging, className, children }) => {
const [forcedX, setForcedX] = React.useState(null);
React.useEffect(() => {
if (currentlyDragging) {
window._animateItem.update = setForcedX;
} else {
if (window._animateItem.update) {
setForcedX(null);
window._animateItem.update = null;
}
}
}, [currentlyDragging]);
return (
<div>
<SliderCore activeIndex={activeIndex} forcedX={forcedX} className={className}>
{children}
</SliderCore>
</div>
);
};
What might be interesting is that I set a global object to point to a setState
setter. That can be called from the outside. I am not sure exactly how the exception occurs, but if I comment out the entire useEffect
bit, it goes away.
What is the expected behavior? No exception. Or at least one that provides some explanation as to what is wrong.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
16.8.6. I don’t know if this worked with earlier versions.
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 3
- Comments: 15
Commits related to this issue
- fix: Upgrade scheduler It seems that we have a dep to an old version of scheduler that doesn't work very well with React Hook see this issue: https://github.com/facebook/react/issues/15647 — committed to cozy/cozy-drive by Crash-- 5 years ago
- fix: Upgrade scheduler It seems that we have a dep to an old version of scheduler that doesn't work very well with React Hook see this issue: https://github.com/facebook/react/issues/15647 — committed to cozy/cozy-drive by Crash-- 5 years ago
- fix: Use specific version of scheduler See https://github.com/facebook/react/issues/15647 — committed to cozy/cozy-home by y-lohse 5 years ago
- fix: Use specific version of scheduler See https://github.com/facebook/react/issues/15647 — committed to cozy/cozy-home by y-lohse 5 years ago
I’ve seen this happen because of wrong
scheduler
version. Unfortunately RN didn’t have explicit dependency onscheduler
version (by mistake). I fixed this on RN master but I don’t think it was released yet.If you see this, try adding
"scheduler": "0.14.0"
dependency into your project (or, if that breaks your project, try the opposite —"scheduler": "0.13.6"
).Try adding
"scheduler": "0.14.0"
to yourpackage.json
and re-running your package manager.Not work for me with react-konva. I try both 0.14 and 0.13.6
That’s not a real fix and will likely blow up later. I recommend to fix the underlying problem instead.
I have fixed the problem by using
useLayoutEffect
instead ofuseEffect
it works fine 😃Walking around that issue I finded solution:
npm list scheduler
, oryarn why scheduler
(more info here)Thank you @gaearon, the bug has been fixed, I just did
npm install scheduler@0.14.0 --save