profile
viewpoint

Ask questionsuseEffect 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.

facebook/react

Answer questions Shrroy

Same problem: using setInterval just doesn’t work as I'd expect with react-native

const [time, setTime] = useState(0);
        useInterval(() => {
            setTime(time +1);
        });

        return (<Text>{time}</Text>);
}

function useInterval(callback) {
    const savedCallback = useRef();

    // Remember the latest function.
    useEffect(() => {
        savedCallback.current = callback;
    }, [callback]);

    // Set up the interval.
    useEffect(() => {
            let id = setInterval(()=>savedCallback.current(), delay);
            return () => clearInterval(id);
    });
}

I'm getting an error says "Callback() it's not a function"

enter image description here

It's working as expected in Reactjs

https://codesandbox.io/s/z69z66kjyx

"dependencies": {
    "react": "16.8.3",
    "react-native": "^0.59.6",
    ...}
useful!

Related questions

Disable react strict mode on third party libraries hot 3
Warning: Unknown DOM property for. Did you mean htmlFor? hot 2
React@16.9 block `javascript:void(0);` hot 2
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 1
TypeError: Object(...) is not a function hot 1
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> hot 1
DevTools: Updating state or props in devtools does not trigger component update. hot 1
Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component hot 1
eslint-plugin-react-hooks v2.0.0 is not loaded correctly. hot 1
Old references retained by memoizedProps in fiber hot 1
Stale values for useState inside callback functions hot 1
ReactDomServer - renderToString Failing with Context Provider on IE11 hot 1
Keep getting `TypeError: Cannot read property 'scrollTop' of null` in a custom hook... hot 1
Route based code splitting, Loading chunk 0 failed after new deployment hot 1
map through connected component, get data of last saga call within all componenets hot 1
Github User Rank List