safe-timers

⌚ safe-timers

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