singleton raf loop

raf.js

// @flow
export const renders: Array<Function> = []
let animId: AnimationFrameID

export default ((): void => {
  if (typeof window === 'undefined') {
    return
  }

  const stop = () => window.cancelAnimationFrame(animId)
  const draw = () =>
    (animId = window.requestAnimationFrame(() => {
      draw()

      for (let i = 0, l = renders.length; i < l; i++) {
        renders[i].call(renders[i])
      }
    }))

  if (!animId) {
    renders.push = function() {
      Array.prototype.push.apply(this, arguments)
      stop()
      draw()
    }

    document.addEventListener('visibilitychange', () => (document.hidden ? stop() : draw()), false)
  }
})()

usage.js

// @flow
import { lifecycle } from 'recompose'
import { renders } from 'raf'

export default lifecycle({
  animId: number
  
  componentDidMount () {
    this.animId = renders.push(() => {
       // do things
    })
  }
  
  componentWillUnmount () {
    renders.splice(this.animId, 1)
  }
})(() => <div />)