Micro-optimise JavaScript part of Animated (#52906)

Summary:
Pull Request resolved: #52906

changelog: [internal]

Micro-optimise JavaScript part of Animated by avoiding JS syntax for private variable/method - #foo. Instead, use double underscores. Benchmarks indicate ~10% improvement.

# Before
### Animated (mode 🚀) ###

| (index) | Task name                                                                    | Latency average (ns)  | Latency median (ns)      | Throughput average (ops/s) | Throughput median (ops/s) | Samples |
| ------- | ---------------------------------------------------------------------------- | --------------------- | ------------------------ | -------------------------- | ------------------------- | ------- |
| 0       | 'render 1 views'                                                             | '84990.06 ± 1.49%'    | '80691.00'               | '12164 ± 0.14%'            | '12393'                   | 11767   |
| 1       | 'render 10 views'                                                            | '373372.50 ± 1.00%'   | '363786.00'              | '2727 ± 0.26%'             | '2749'                    | 2679    |
| 2       | 'render 100 views'                                                           | '3099588.37 ± 0.92%'  | '3017559.00'             | '324 ± 0.74%'              | '331'                     | 323     |
| 3       | 'render 1 animated views (without animations set up)'                        | '174636.87 ± 0.67%'   | '168783.00'              | '5808 ± 0.17%'             | '5925'                    | 5727    |
| 4       | 'render 10 animated views (without animations set up)'                       | '1054481.51 ± 0.61%'  | '1036686.00'             | '953 ± 0.37%'              | '965'                     | 949     |
| 5       | 'render 100 animated views (without animations set up)'                      | '9176283.60 ± 1.12%'  | '8932316.00'             | '109 ± 0.95%'              | '112'                     | 109     |
| 6       | 'render 1 animated views (with a single animation set up - JS driven)'       | '204383.77 ± 0.52%'   | '199109.00'              | '4943 ± 0.17%'             | '5022'                    | 4893    |
| 7       | 'render 10 animated views (with a single animation set up - JS driven)'      | '1315894.97 ± 0.36%'  | '1300562.00 ± 40.00'     | '762 ± 0.30%'              | '769'                     | 760     |
| 8       | 'render 100 animated views (with a single animation set up - JS driven)'     | '11924031.45 ± 1.36%' | '11753334.50 ± 30040.50' | '84 ± 1.18%'               | '85'                      | 84      |
| 9       | 'render 1 animated views (with a single animation set up - native driven)'   | '318103.70 ± 0.37%'   | '311657.50 ± 0.50'       | '3162 ± 0.20%'             | '3209'                    | 3144    |
| 10      | 'render 10 animated views (with a single animation set up - native driven)'  | '2230305.96 ± 0.51%'  | '2191890.00'             | '449 ± 0.41%'              | '456'                     | 449     |
| 11      | 'render 100 animated views (with a single animation set up - native driven)' | '21983695.16 ± 0.75%' | '21945687.00 ± 17186.00' | '46 ± 0.74%'               | '46'                      | 64      |

# After

### Animated (mode 🚀) ###

| (index) | Task name                                                                    | Latency average (ns)  | Latency median (ns)     | Throughput average (ops/s) | Throughput median (ops/s) | Samples |
| ------- | ---------------------------------------------------------------------------- | --------------------- | ----------------------- | -------------------------- | ------------------------- | ------- |
| 0       | 'render 1 views'                                                             | '82684.75 ± 1.11%'    | '80231.00'              | '12331 ± 0.08%'            | '12464'                   | 12095   |
| 1       | 'render 10 views'                                                            | '378798.65 ± 1.16%'   | '365378.50 ± 9.50'      | '2703 ± 0.31%'             | '2737'                    | 2640    |
| 2       | 'render 100 views'                                                           | '3124253.51 ± 0.95%'  | '3039842.00'            | '322 ± 0.76%'              | '329'                     | 321     |
| 3       | 'render 1 animated views (without animations set up)'                        | '165580.70 ± 0.73%'   | '161562.00'             | '6131 ± 0.14%'             | '6190'                    | 6040    |
| 4       | 'render 10 animated views (without animations set up)'                       | '979127.10 ± 0.60%'   | '962509.50 ± 5.50'      | '1027 ± 0.36%'             | '1039'                    | 1022    |
| 5       | 'render 100 animated views (without animations set up)'                      | '8487740.98 ± 1.32%'  | '8235139.50 ± 3244.50'  | '118 ± 1.05%'              | '121'                     | 118     |
| 6       | 'render 1 animated views (with a single animation set up - JS driven)'       | '185333.93 ± 0.52%'   | '181582.00'             | '5451 ± 0.15%'             | '5507'                    | 5396    |
| 7       | 'render 10 animated views (with a single animation set up - JS driven)'      | '1145679.81 ± 0.37%'  | '1131668.00'            | '875 ± 0.29%'              | '884'                     | 873     |
| 8       | 'render 100 animated views (with a single animation set up - JS driven)'     | '10451056.69 ± 1.60%' | '10064069.50 ± 826.50'  | '96 ± 1.39%'               | '99'                      | 96      |
| 9       | 'render 1 animated views (with a single animation set up - native driven)'   | '292243.89 ± 0.40%'   | '286740.00'             | '3447 ± 0.21%'             | '3487'                    | 3422    |
| 10      | 'render 10 animated views (with a single animation set up - native driven)'  | '1993053.78 ± 0.47%'  | '1958960.00 ± 20.00'    | '503 ± 0.39%'              | '510'                     | 502     |
| 11      | 'render 100 animated views (with a single animation set up - native driven)' | '19528221.48 ± 0.95%' | '19383511.00 ± 7431.00' | '51 ± 0.92%'               | '52'                      | 64      |

Reviewed By: rubennorte

Differential Revision: D79179369

fbshipit-source-id: e641be0e8ec313b58bcae8330f127e707cd4fffc

Author: sammy-SC

packages/react-native/Libraries/Animated/animations/Animation.js

@@ -41,9 +41,9 @@ let startNativeAnimationNextId = 1;
 // Once an animation has been stopped or finished its course, it will
 // not be reused.
 export default class Animation {
-  #nativeID: ?number;
-  #onEnd: ?EndCallback;
-  #useNativeDriver: boolean;
+  _nativeID: ?number;
+  _onEnd: ?EndCallback;
+  _useNativeDriver: boolean;
 
   __active: boolean;
   __isInteraction: boolean;
@@ -52,10 +52,10 @@ export default class Animation {
   __debugID: ?string;
 
   constructor(config: AnimationConfig) {
-    this.#useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
+    this._useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
 
     this.__active = false;
-    this.__isInteraction = config.isInteraction ?? !this.#useNativeDriver;
+    this.__isInteraction = config.isInteraction ?? !this._useNativeDriver;
     this.__isLooping = config.isLooping;
     this.__iterations = config.iterations ?? 1;
     if (__DEV__) {
@@ -70,21 +70,21 @@ export default class Animation {
     previousAnimation: ?Animation,
     animatedValue: AnimatedValue,
   ): void {
-    if (!this.#useNativeDriver && animatedValue.__isNative === true) {
+    if (!this._useNativeDriver && animatedValue.__isNative === true) {
       throw new Error(
         'Attempting to run JS driven animation on animated node ' +
           'that has been moved to "native" earlier by starting an ' +
           'animation with `useNativeDriver: true`',
       );
     }
 
-    this.#onEnd = onEnd;
+    this._onEnd = onEnd;
     this.__active = true;
   }
 
   stop(): void {
-    if (this.#nativeID != null) {
-      const nativeID = this.#nativeID;
+    if (this._nativeID != null) {
+      const nativeID = this._nativeID;
       const identifier = `${nativeID}:stopAnimation`;
       try {
         // This is only required when singleOpBatching is used, as otherwise
@@ -123,7 +123,7 @@ export default class Animation {
   }
 
   __startAnimationIfNative(animatedValue: AnimatedValue): boolean {
-    if (!this.#useNativeDriver) {
+    if (!this._useNativeDriver) {
       return false;
     }
 
@@ -135,9 +135,9 @@ export default class Animation {
     try {
       const config = this.__getNativeAnimationConfig();
       animatedValue.__makeNative(config.platformConfig);
-      this.#nativeID = NativeAnimatedHelper.generateNewAnimationId();
+      this._nativeID = NativeAnimatedHelper.generateNewAnimationId();
       NativeAnimatedHelper.API.startAnimatingNode(
-        this.#nativeID,
+        this._nativeID,
         animatedValue.__getNativeTag(),
         config,
         result => {
@@ -185,9 +185,9 @@ export default class Animation {
    * callback will never be called more than once.
    */
   __notifyAnimationEnd(result: EndResult): void {
-    const callback = this.#onEnd;
+    const callback = this._onEnd;
     if (callback != null) {
-      this.#onEnd = null;
+      this._onEnd = null;
       callback(result);
     }
   }

packages/react-native/Libraries/Animated/nodes/AnimatedNode.js

@@ -28,7 +28,7 @@ let _assertNativeAnimatedModule: ?() => void = () => {
 };
 
 export default class AnimatedNode {
-  #listeners: Map<string, ValueListenerCallback>;
+  _listeners: Map<string, ValueListenerCallback>;
 
   _platformConfig: ?PlatformConfig = undefined;
 
@@ -38,7 +38,7 @@ export default class AnimatedNode {
       ...
     }>,
   ) {
-    this.#listeners = new Map();
+    this._listeners = new Map();
     if (__DEV__) {
       this.__debugID = config?.debugID;
     }
@@ -85,7 +85,7 @@ export default class AnimatedNode {
    */
   addListener(callback: (value: any) => mixed): string {
     const id = String(_uniqueId++);
-    this.#listeners.set(id, callback);
+    this._listeners.set(id, callback);
     return id;
   }
 
@@ -96,7 +96,7 @@ export default class AnimatedNode {
    * See https://reactnative.dev/docs/animatedvalue#removelistener
    */
   removeListener(id: string): void {
-    this.#listeners.delete(id);
+    this._listeners.delete(id);
   }
 
   /**
@@ -105,11 +105,11 @@ export default class AnimatedNode {
    * See https://reactnative.dev/docs/animatedvalue#removealllisteners
    */
   removeAllListeners(): void {
-    this.#listeners.clear();
+    this._listeners.clear();
   }
 
   hasListeners(): boolean {
-    return this.#listeners.size > 0;
+    return this._listeners.size > 0;
   }
 
   __onAnimatedValueUpdateReceived(value: number, offset: number): void {
@@ -118,7 +118,7 @@ export default class AnimatedNode {
 
   __callListeners(value: number): void {
     const event = {value};
-    this.#listeners.forEach(listener => {
+    this._listeners.forEach(listener => {
       listener(event);
     });
   }

packages/react-native/Libraries/Animated/nodes/AnimatedObject.js

@@ -82,7 +82,7 @@ function mapAnimatedNodes(value: any, fn: any => any, depth: number = 0): any {
 }
 
 export default class AnimatedObject extends AnimatedWithChildren {
-  #nodes: $ReadOnlyArray<AnimatedNode>;
+  _nodes: $ReadOnlyArray<AnimatedNode>;
   _value: mixed;
 
   /**
@@ -106,7 +106,7 @@ export default class AnimatedObject extends AnimatedWithChildren {
     config?: ?AnimatedNodeConfig,
   ) {
     super(config);
-    this.#nodes = nodes;
+    this._nodes = nodes;
     this._value = value;
   }
 
@@ -117,7 +117,7 @@ export default class AnimatedObject extends AnimatedWithChildren {
   }
 
   __getValueWithStaticObject(staticObject: mixed): any {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     let index = 0;
     // NOTE: We can depend on `this._value` and `staticObject` sharing a
     // structure because of `useAnimatedPropsMemo`.
@@ -131,7 +131,7 @@ export default class AnimatedObject extends AnimatedWithChildren {
   }
 
   __attach(): void {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__addChild(this);
@@ -140,7 +140,7 @@ export default class AnimatedObject extends AnimatedWithChildren {
   }
 
   __detach(): void {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__removeChild(this);
@@ -149,7 +149,7 @@ export default class AnimatedObject extends AnimatedWithChildren {
   }
 
   __makeNative(platformConfig: ?PlatformConfig): void {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__makeNative(platformConfig);

packages/react-native/Libraries/Animated/nodes/AnimatedProps.js

@@ -92,11 +92,11 @@ function createAnimatedProps(
 }
 
 export default class AnimatedProps extends AnimatedNode {
-  #callback: () => void;
-  #nodeKeys: $ReadOnlyArray<string>;
-  #nodes: $ReadOnlyArray<AnimatedNode>;
-  #props: {[string]: mixed};
-  #target: ?TargetView = null;
+  _callback: () => void;
+  _nodeKeys: $ReadOnlyArray<string>;
+  _nodes: $ReadOnlyArray<AnimatedNode>;
+  _props: {[string]: mixed};
+  _target: ?TargetView = null;
 
   constructor(
     inputProps: {[string]: mixed},
@@ -106,19 +106,19 @@ export default class AnimatedProps extends AnimatedNode {
   ) {
     super(config);
     const [nodeKeys, nodes, props] = createAnimatedProps(inputProps, allowlist);
-    this.#nodeKeys = nodeKeys;
-    this.#nodes = nodes;
-    this.#props = props;
-    this.#callback = callback;
+    this._nodeKeys = nodeKeys;
+    this._nodes = nodes;
+    this._props = props;
+    this._callback = callback;
   }
 
   __getValue(): Object {
     const props: {[string]: mixed} = {};
 
-    const keys = Object.keys(this.#props);
+    const keys = Object.keys(this._props);
     for (let ii = 0, length = keys.length; ii < length; ii++) {
       const key = keys[ii];
-      const value = this.#props[key];
+      const value = this._props[key];
 
       if (value instanceof AnimatedNode) {
         props[key] = value.__getValue();
@@ -143,7 +143,7 @@ export default class AnimatedProps extends AnimatedNode {
     const keys = Object.keys(staticProps);
     for (let ii = 0, length = keys.length; ii < length; ii++) {
       const key = keys[ii];
-      const maybeNode = this.#props[key];
+      const maybeNode = this._props[key];
 
       if (key === 'style') {
         const staticStyle = staticProps.style;
@@ -176,10 +176,10 @@ export default class AnimatedProps extends AnimatedNode {
   __getNativeAnimatedEventTuples(): $ReadOnlyArray<[string, AnimatedEvent]> {
     const tuples = [];
 
-    const keys = Object.keys(this.#props);
+    const keys = Object.keys(this._props);
     for (let ii = 0, length = keys.length; ii < length; ii++) {
       const key = keys[ii];
-      const value = this.#props[key];
+      const value = this._props[key];
 
       if (value instanceof AnimatedEvent && value.__isNative) {
         tuples.push([key, value]);
@@ -192,8 +192,8 @@ export default class AnimatedProps extends AnimatedNode {
   __getAnimatedValue(): Object {
     const props: {[string]: mixed} = {};
 
-    const nodeKeys = this.#nodeKeys;
-    const nodes = this.#nodes;
+    const nodeKeys = this._nodeKeys;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const key = nodeKeys[ii];
       const node = nodes[ii];
@@ -204,7 +204,7 @@ export default class AnimatedProps extends AnimatedNode {
   }
 
   __attach(): void {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__addChild(this);
@@ -213,12 +213,12 @@ export default class AnimatedProps extends AnimatedNode {
   }
 
   __detach(): void {
-    if (this.__isNative && this.#target != null) {
-      this.#disconnectAnimatedView(this.#target);
+    if (this.__isNative && this._target != null) {
+      this.#disconnectAnimatedView(this._target);
     }
-    this.#target = null;
+    this._target = null;
 
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__removeChild(this);
@@ -228,11 +228,11 @@ export default class AnimatedProps extends AnimatedNode {
   }
 
   update(): void {
-    this.#callback();
+    this._callback();
   }
 
   __makeNative(platformConfig: ?PlatformConfig): void {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__makeNative(platformConfig);
@@ -246,19 +246,19 @@ export default class AnimatedProps extends AnimatedNode {
       // where it will be needed to traverse the graph of attached values.
       super.__setPlatformConfig(platformConfig);
 
-      if (this.#target != null) {
-        this.#connectAnimatedView(this.#target);
+      if (this._target != null) {
+        this.#connectAnimatedView(this._target);
       }
     }
   }
 
   setNativeView(instance: TargetViewInstance): void {
-    if (this.#target?.instance === instance) {
+    if (this._target?.instance === instance) {
       return;
     }
-    this.#target = {instance, connectedViewTag: null};
+    this._target = {instance, connectedViewTag: null};
     if (this.__isNative) {
-      this.#connectAnimatedView(this.#target);
+      this.#connectAnimatedView(this._target);
     }
   }
 
@@ -306,8 +306,8 @@ export default class AnimatedProps extends AnimatedNode {
     const platformConfig = this.__getPlatformConfig();
     const propsConfig: {[string]: number} = {};
 
-    const nodeKeys = this.#nodeKeys;
-    const nodes = this.#nodes;
+    const nodeKeys = this._nodeKeys;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const key = nodeKeys[ii];
       const node = nodes[ii];