Provides safe versions of
requestIdleCallback which will be cleared/cancelled automatically before component is unmounted.
Inspired by react-timer-mixin.
yarn add @hocs/safe-timers
withSafeTimeout: HigherOrderComponentwithSafeInterval: HigherOrderComponentwithSafeAnimationFrame: HigherOrderComponentwithSafeIdleCallback: HigherOrderComponent
Basic wrapper to remount Target component when we want:
;;;const Demo =<div><Target key=targetKey/><button onClick=onButtonClick>Remount</button></div>;Demo;
Target component which is using timeouts:
;;;const sayHi = console;const Target =<button onClick=onButtonClick>Start 2 secs timeout</button>;withSafeTimeoutTarget;
The same approach goes for all HOCs in this package:
So basically all you need to do in comparison with native timers is to add
Clear / Cancel
In order to keep your props as clean as possible, to manually clear/cancel a safe timer its "unsubscriber" is provided as a result of that timer call:
const clearSafeInterval = ;;
(How this pattern is called? In opposite to returning some unique
This method is not expected to become standard, and is only implemented by recent builds of Internet Explorer and Node.js 0.10+. It meets resistance both from Gecko (Firefox) and Webkit (Google/Apple).