gaearon/overreacted.io

React-Native Making setInterval Declarative with React Hoo

DevJett opened this issue · 0 comments

I'm playing with React Hooks for more than a few hours, I'm probably ran into an intriguing problem: using setInterval just doesn’t work as I'd expect with react-native

function Counter() {
  const [time, setTime] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      console.log('called');
      setTime(time + 1);
    }, 1000);
    return () => {
      console.log('cleared');
      clearInterval(id);
    };
  }, [time]);

  return <div>{time}</div>;
}

The code above should clearInterval every time that time state changes
It works fine on ReactJS but on React-native 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",
    ...}