react-live-clock - npm Package Compare versions

Comparing version 4.0.3 to 4.0.5

CHANGELOG.md

 # Changelog
 
+## [4.0.5] - 2020-03-16
+
+Fixes
+* Fixes ticking stoping caused in 4.0.4
+
+Adds
+*  Nothing
+
+Removes
+*  Nothing
+
+## [4.0.4] - 2020-03-11
+
+Fixes
+* Trying to update state on unmounted component [#36](https://github.com/pvoznyuk/react-live-clock/issues/36#issuecomment-597352873)
+
+Adds
+*  Nothing
+
+Removes
+*  Nothing
+
 ## [4.0.1] - 2020-01-20
@@ -4,0 +26,0 @@

lib/Component.js

@@ -75,2 +75,8 @@ 'use strict';
 
+  var clearMyInterval = function clearMyInterval(interval) {
+    if (interval) {
+      clearInterval(tickTimer);
+    }
+  };
+
   var updateClock = function updateClock() {
@@ -99,3 +105,5 @@ var onChange = props.onChange;
       });
-      setFormattedString(newFormattedTime);
+      if (mounted) {
+        setFormattedString(newFormattedTime);
+      }
     }
@@ -107,2 +115,6 @@
   (0, _react.useEffect)(function () {
+    setMounted(true);
+  }, []);
+
+  (0, _react.useEffect)(function () {
     var ticking = props.ticking,
@@ -113,15 +125,15 @@ interval = props.interval;
     if (ticking || interval) {
-      if (!mounted) {
-        var intervalId = setInterval(function () {
-          return updateClock();
-        }, interval);
+      if (tickTimer) {
+        clearMyInterval(tickTimer);
+      }
+      var intervalId = setInterval(function () {
+        return updateClock();
+      }, interval);
 
-        setTickTimer(intervalId);
-        setMounted(true);
-      }
+      setTickTimer(intervalId);
     }
     return function () {
-      return tickTimer && clearInterval(tickTimer);
+      return clearMyInterval(tickTimer);
     };
-  }, []);
+  }, [mounted]);
 
@@ -128,0 +140,0 @@ return _react2.default.createElement(

package.json

 {
   "name": "react-live-clock",
-  "version": "4.0.3",
+  "version": "4.0.5",
   "description": "React Live Clock",
@@ -45,3 +45,4 @@ "main": "lib/index.js",
     "react-fittext": "1.0.0",
-    "react-highlight.js": "1.0.7"
+    "react-highlight.js": "1.0.7",
+    "react-router-dom": "5.1.2"
   },
@@ -48,0 +49,0 @@ "dependencies": {

src/Component.js

@@ -41,2 +41,7 @@ import React, {useState, useEffect} from 'react';
 
+  const clearMyInterval = interval => {
+    if (interval) {
+      clearInterval(tickTimer);
+    }
+  };
 
@@ -65,3 +70,5 @@ const updateClock = () => {
       });
-      setFormattedString(newFormattedTime);
+      if (mounted) {
+        setFormattedString(newFormattedTime);
+      }
     }
@@ -72,2 +79,5 @@
 
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
@@ -78,12 +88,13 @@ useEffect(() => {
     if (ticking || interval) {
-      if (!mounted) {
-        const intervalId = setInterval(() => updateClock(), interval);
+      if (tickTimer) {
+        clearMyInterval(tickTimer);
+      }
+      const intervalId = setInterval(() => updateClock(), interval);
 
-        setTickTimer(intervalId);
-        setMounted(true);
-      }
+      setTickTimer(intervalId);
     }
-    return () => tickTimer && clearInterval(tickTimer);
-  }, []);
+    return () => clearMyInterval(tickTimer);
+  }, [mounted]);
 
+
   return (
@@ -90,0 +101,0 @@ <time {...childProps} >

src/example/App/index.js

@@ -8,4 +8,8 @@ import React from 'react';
 import css from './App.css';
+import {
+  BrowserRouter as Router,
+  Route,
+  Link
+} from 'react-router-dom';
 
-// eslint-disable-next-line newline-after-var
 const Panel = ({title, code, children}) =>
@@ -26,4 +30,3 @@ <div className="panel panel-default">
     </div>
-  </div>
-;
+  </div>;
 
@@ -62,2 +65,15 @@ Panel.propTypes = {
 
+    <Router>
+      <Link to="/">Home</Link>
+      <br />
+      <Link to="/test">Test</Link>
+      <Route exact={true} path="/" >
+        <Panel
+          code="<Clock format={'h:mm:ssa'} ticking={true} />"
+          title="This is to test the components Cleanup function">
+          <Clock format={'h:mm:ssa'} ticking={true} />
+        </Panel>
+      </Route>
+    </Router>
+
     <Panel
@@ -64,0 +80,0 @@ code={`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9665428

increased by0.02%

Lines of code

77279

increased by0.06%

Worsened metrics

Dev dependency count

7

increased by16.67%

No dependency changes