How to use the raf.cancel function in raf

componentWillUnmount () {
    this.unmounting = true
    this.animationId !== null && raf.cancel(this.animationId)
  }

disconnectedCallback() {
		//This happens when the element is moved inside the DOM using sth. like insertBefore.
		//In this case we will just ignore the disconnectedCallback, because the Node is not actually disconnected.
		//It is safe to leave the behaviors attached, because stuff like nextSibling and parentElement are defined.
		//A connectedCallback will follow right away.
		//https://twitter.com/WebReflection/status/984400317801476097
		if (this.isConnected) {
			return;
		}

		this._scheduledBatchUpdate = false;
		raf.cancel(this._batchHandle);
		delete this._batchHandle;

		Scrollmeister.detachAllBehaviors(this);

		Scrollmeister.componentDisconnected(this);
	}

window.addEventListener('keydown', function(ev){
    if(ev.keyCode == 27){
        if(isAnimation) raf.cancel(id);
        else    id = raf(animate);

        isAnimation = !isAnimation;
    }
});

raf(callback) {
        if (this.timer) raf.cancel(this.timer);
        this.timer = raf(() => {
            this.timer = undefined;
            callback();
        });
    },

componentWillUnmount = () => {
    this.unsetDomStyles()
    this.removeListeners()
    caf(this.requestFrame)
    clearTimeout(this.hideTracksTimeout)
    clearInterval(this.detectScrollingInterval)
  }

componentWillUnmount() {
        this.removeListeners();
        caf(this.requestFrame);
        clearTimeout(this.hideTracksTimeout);
        clearInterval(this.detectScrollingInterval);
    },

endTween() {
        raf.cancel(this.tweenHandle);
        this.setState({
            ...this.state,
            currentValue: this.props.value
        });
    }

update() {

    if( this.updateActive ) {
      this.render();
      this.raf = raf( this.update );
    } else {
      raf.cancel( this.raf );
    }
  }