clean up function doesn't only run when compnent unmounts

Author: rwieruch

src/index.js

@@ -2,9 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 // import App from './useState-example';
-// import App from './useEffect-example';
+import App from './useEffect-example';
 // import App from './customHook-example';
-import App from './useDataApiHook-example';
+// import App from './useDataApiHook-example';
 
 import * as serviceWorker from './serviceWorker';
 

src/useEffect-example/index.js

@@ -4,14 +4,18 @@ function App() {
   const [isOn, setIsOn] = useState(false);
   const [timer, setTimer] = useState(0);
 
-  useEffect(() => {
-    const interval = setInterval(
-      () => isOn && setTimer(timer + 1),
-      1000,
-    );
-
-    return () => clearInterval(interval);
-  }, []);
+  useEffect(
+    () => {
+      let interval;
+
+      if (isOn) {
+        interval = setInterval(() => setTimer(timer + 1), 1000);
+      }
+
+      return () => clearInterval(interval);
+    },
+    [isOn],
+  );
 
   const onReset = () => {
     setIsOn(false);