Switch branches/tags
with-view-layout-props@0.2.0 with-view-layout-props@0.1.3 with-view-layout-props@0.1.2 with-view-layout-props@0.1.1 with-view-layout-props@0.1.0 with-resize-observer-props@0.5.0 with-resize-observer-props@0.4.1 with-resize-observer-props@0.4.0 with-resize-observer-props@0.3.1 with-resize-observer-props@0.3.0 with-resize-observer-props@0.2.0 with-resize-observer-props@0.1.0 with-page-visibility-props@0.4.0 with-page-visibility-props@0.3.0 with-page-visibility-props@0.2.0 with-page-visibility-props@0.1.0 with-online-status-props@0.3.0 with-online-status-props@0.2.0 with-online-status-props@0.1.1 with-online-status-props@0.1.0 with-match-media-props@0.4.0 with-match-media-props@0.3.0 with-match-media-props@0.2.0 with-match-media-props@0.1.2 with-match-media-props@0.1.1 with-match-media-props@0.1.0 with-log@0.5.0 with-log@0.4.0 with-log@0.3.0 with-log@0.2.0 with-log@0.1.0 with-lifecycle@0.5.0 with-lifecycle@0.4.0 with-lifecycle@0.3.0 with-lifecycle@0.2.0 with-lifecycle@0.1.1 with-lifecycle@0.1.0 with-intersection-observer-props@0.5.0 with-intersection-observer-props@0.4.0 with-intersection-observer-props@0.3.0 with-intersection-observer-props@0.2.0 with-intersection-observer-props@0.1.0 with-debugger@0.4.0 with-debugger@0.3.0 with-debugger@0.2.0 with-debugger@0.1.0 with-callback-once@0.3.0 with-callback-once@0.2.0 with-callback-once@0.1.0 with-callback-on-change@0.3.0 with-callback-on-change@0.2.0 with-callback-on-change@0.1.0 with-callback-on-change-while@0.3.0 with-callback-on-change-while@0.2.0 with-callback-on-change-while@0.1.0 throttle-handler@0.5.0 throttle-handler@0.4.0 throttle-handler@0.3.0 throttle-handler@0.2.1 throttle-handler@0.1.1 throttle-handler@0.1.0 safe-timers@0.4.0 safe-timers@0.3.0 safe-timers@0.2.0 safe-timers@0.1.0 prevent-handlers-default@0.4.0 prevent-handlers-default@0.3.0 prevent-handlers-default@0.2.1 prevent-handlers-default@0.1.0 omit-props@0.4.0 omit-props@0.3.0 omit-props@0.2.1 omit-props@0.1.1 omit-props@0.1.0 debounce-handler@0.5.0 debounce-handler@0.4.1 debounce-handler@0.4.0 debounce-handler@0.3.0 debounce-handler@0.2.1 debounce-handler@0.1.1 debounce-handler@0.1.0
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
demo
src
test
package.json
readme.md

readme.md

⌚️ safe-timers

npm ci coverage deps

Part of a collection of Higher-Order Components for React, especially useful with Recompose.

Provides safe versions of setTimeout, setInterval, requestAnimationFrame and requestIdleCallback which will be cleared/cancelled automatically before component is unmounted.

Inspired by react-timer-mixin.

Install

yarn add @hocs/safe-timers

Usage

withSafeTimeout: HigherOrderComponent
withSafeInterval: HigherOrderComponent
withSafeAnimationFrame: HigherOrderComponent
withSafeIdleCallback: HigherOrderComponent

Basic wrapper to remount Target component when we want:

import React from 'react';
import { compose, withState, withHandlers } from 'recompose';

import Target from './Target';

const Demo = ({ targetKey, onButtonClick }) => (
  <div>
    <Target key={targetKey}/>
    <button onClick={onButtonClick}>Remount</button>
  </div>
);

export default compose(
  withState('targetKey', 'setTargetKey', 0),
  withHandlers({
    onButtonClick: ({ setTargetKey, targetKey }) => () => setTargetKey(targetKey + 1)
  })
)(Demo);

Target component which is using timeouts:

import React from 'react';
import { compose, withHandlers } from 'recompose';
import { withSafeTimeout } from '@hocs/safe-timers';

const sayHi = () => console.log('Hi!');

const Target = ({ onButtonClick }) => (
  <button onClick={onButtonClick}>Start 2 secs timeout</button>
);

export default compose(
  withSafeTimeout,
  withHandlers({
    onButtonClick: ({ setSafeTimeout }) => () => setSafeTimeout(sayHi, 2000)
  })
)(Target);

📺 Check out live demo.

The same approach goes for all HOCs in this package:

  • withSafeTimeout provides setSafeTimeout prop
  • withSafeInterval provides setSafeInterval prop
  • withSafeAnimationFrame provides requestSafeAnimationFrame prop
  • withSafeIdleCallback provides requestSafeIdleCallback prop

So basically all you need to do in comparison with native timers is to add Safe word.

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 = setSafeInterval(() => {}, 100);

clearSafeInterval();

(How this pattern is called? In opposite to returning some unique id).

Notes

requestAnimationFrame

You might still need a polyfill (MDN, Can I use?).

requestIdleCallback

You might still need a polyfill (MDN, Can I use?).

setImmediate

MDN:

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).