Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@hocs/safe-timers

0.4.0 • Public • Published

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

Install

npm i @hocs/safe-timers

DownloadsWeekly Downloads

619

Version

0.4.0

License

MIT

Unpacked Size

21.2 kB

Total Files

20

Last publish

Collaborators

  • avatar