From 8ceb1586ee596a1bdf44bbb8e4c6ab54cbaa7c8b Mon Sep 17 00:00:00 2001
From: Thomas BARRAS <thomas.barras26@gmail.com>
Date: Fri, 5 Oct 2018 12:10:33 -0700
Subject: [PATCH] Remove TimerMixin from ListView (#21488)

Summary:
Related to #21485

- Remove TimerMixin from ListView

- All flow tests succeed.
- RNTester: <ListView> iOS (this change should only affect iOS because calculateChildFrames is iOS only)
Show perf monitor, show ListView* screen, start scrolling. UI frame Rate is used at the beginning. When scrolling there is no drop in FPS rate.

TODO: I think a load test would be more relevant:
- Update props multiple times and scroll

[GENERAL] [ENHANCEMENT] [ListView.js] - rm TimerMixin
Pull Request resolved: https://github.com/facebook/react-native/pull/21488

Differential Revision: D10219088

Pulled By: RSNara

fbshipit-source-id: 946e4fc1319324c5bf4947a2060b18bebb6fc493
---
 Libraries/Lists/ListView/ListView.js | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/Libraries/Lists/ListView/ListView.js b/Libraries/Lists/ListView/ListView.js
index b240620b1..9d1443e8f 100644
--- a/Libraries/Lists/ListView/ListView.js
+++ b/Libraries/Lists/ListView/ListView.js
@@ -18,7 +18,6 @@ const RCTScrollViewManager = require('NativeModules').ScrollViewManager;
 const ScrollView = require('ScrollView');
 const ScrollResponder = require('ScrollResponder');
 const StaticRenderer = require('StaticRenderer');
-const TimerMixin = require('react-timer-mixin');
 const View = require('View');
 const cloneReferencedElement = require('react-clone-referenced-element');
 const createReactClass = require('create-react-class');
@@ -216,6 +215,7 @@ type Props = $ReadOnly<{|
 
 const ListView = createReactClass({
   displayName: 'ListView',
+  _rafIds: ([]: Array<AnimationFrameID>),
   _childFrames: ([]: Array<Object>),
   _sentEndForContentLength: (null: ?number),
   _scrollComponent: (null: ?React.ElementRef<typeof ScrollView>),
@@ -223,7 +223,7 @@ const ListView = createReactClass({
   _visibleRows: ({}: Object),
   scrollProperties: ({}: Object),
 
-  mixins: [ScrollResponder.Mixin, TimerMixin],
+  mixins: [ScrollResponder.Mixin],
 
   statics: {
     DataSource: ListViewDataSource,
@@ -347,16 +347,23 @@ const ListView = createReactClass({
       contentLength: null,
       offset: 0,
     };
+
+    this._rafIds = [];
     this._childFrames = [];
     this._visibleRows = {};
     this._prevRenderedRowsCount = 0;
     this._sentEndForContentLength = null;
   },
 
+  componentWillUnmount: function() {
+    this._rafIds.forEach(cancelAnimationFrame);
+    this._rafIds = [];
+  },
+
   componentDidMount: function() {
     // do this in animation frame until componentDidMount actually runs after
     // the component is laid out
-    this.requestAnimationFrame(() => {
+    this._requestAnimationFrame(() => {
       this._measureAndUpdateScrollProps();
     });
   },
@@ -384,7 +391,7 @@ const ListView = createReactClass({
   },
 
   componentDidUpdate: function() {
-    this.requestAnimationFrame(() => {
+    this._requestAnimationFrame(() => {
       this._measureAndUpdateScrollProps();
     });
   },
@@ -535,6 +542,14 @@ const ListView = createReactClass({
    * Private methods
    */
 
+  _requestAnimationFrame: function(fn: () => void): void {
+    const rafId = requestAnimationFrame(() => {
+      this._rafIds.splice(this._rafIds.indexOf(rafId));
+      fn();
+    });
+    this._rafIds.push(rafId);
+  },
+
   _measureAndUpdateScrollProps: function() {
     const scrollComponent = this.getScrollResponder();
     if (!scrollComponent || !scrollComponent.getInnerViewNode) {