remove cancelAnimationFrame complexity and rely on MarkedExecution class

src/components/views/voice_messages/LiveRecordingClock.tsx

@@ -34,11 +34,17 @@ interface IState {
 @replaceableComponent("views.voice_messages.LiveRecordingClock")
 export default class LiveRecordingClock extends React.PureComponent<IProps, IState> {
     private seconds = 0;
-    private rafId: number;
+    private scheduledUpdate = new MarkedExecution(
+        () => this.updateClock(),
+        () => requestAnimationFrame(() => this.scheduledUpdate.trigger()),
+    )
 
-    state = {
+    constructor(props) {
+        super(props);
+        this.state = {
             seconds: 0,
         }
+    }
 
     componentDidMount() {
         this.props.recorder.liveData.onUpdate((update: IRecordingUpdate) => {
@@ -47,24 +53,10 @@ export default class LiveRecordingClock extends React.PureComponent<IProps, ISta
         });
     }
 
-    private scheduledUpdate = new MarkedExecution(
-        () => this.updateClock(),
-        () => this.onLiveDataUpdate(),
-    )
-
-    private onLiveDataUpdate() {
-        if (this.rafId) {
-            cancelAnimationFrame(this.rafId);
-        }
-
-        this.rafId = requestAnimationFrame(() => this.scheduledUpdate.trigger())
-    }
-
     private updateClock() {
         this.setState({
             seconds: this.seconds,
         })
-        this.rafId = null;
     }
 
     public render() {

src/components/views/voice_messages/LiveRecordingWaveform.tsx

@@ -38,11 +38,17 @@ export default class LiveRecordingWaveform extends React.PureComponent<IProps, I
     };
 
     private waveform: number[] = [];
-    private rafId: number;
+    private scheduledUpdate = new MarkedExecution(
+        () => this.updateWaveform(),
+        () => requestAnimationFrame(() => this.scheduledUpdate.trigger()),
+    )
 
-    state = {
+    constructor(props) {
+        super(props);
+        this.state = {
             waveform: [],
         }
+    }
 
     componentDidMount() {
         this.props.recorder.liveData.onUpdate((update: IRecordingUpdate) => {
@@ -51,24 +57,10 @@ export default class LiveRecordingWaveform extends React.PureComponent<IProps, I
         });
     }
 
-    private scheduledUpdate = new MarkedExecution(
-        () => this.updateWaveform(),
-        () => this.onLiveDataUpdate(),
-    )
-
-    private onLiveDataUpdate() {
-        if (this.rafId) {
-            cancelAnimationFrame(this.rafId);
-        }
-
-        this.rafId = requestAnimationFrame(() => this.scheduledUpdate.trigger())
-    }
-
     private updateWaveform() {
         this.setState({
             waveform: this.waveform,
         })
-        this.rafId = null;
     }
 
     public render() {

src/utils/MarkedExecution.ts

@@ -33,13 +33,6 @@ export class MarkedExecution {
     constructor(private fn: () => void, private onMarkCallback?: () => void) {
     }
 
-    /**
-     * Getter for the _marked property
-     */
-    public get marked() {
-        return this._marked;
-    }
-
     /**
      * Resets the mark without calling the function.
      */