Add example to compare memoize expensive JS task (facebook#38831)

Summary:
Pull Request resolved: facebook#38831

Changelog:
[Internal] - Add example to compare memoize expensive JS tasks

Reviewed By: NickGerleman

Differential Revision: D48048033

fbshipit-source-id: 6d60ea56a19a25ef2f136aba53ae417b441652ad

Author: Xin Chen

packages/rn-tester/js/examples/Performance/performanceComparisonExamples/NotMemoizeExpensiveTaskExample.js

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+'use strict';
+
+import * as React from 'react';
+import {Text} from 'react-native';
+import RNTesterButton from '../../../components/RNTesterButton';
+
+const {useState, useMemo} = React;
+
+function NotMemoizeExpensiveTaskExampleBadExample(): React.Node {
+  const [count, setCount] = useState(0);
+
+  let expensiveResult = 0;
+  for (let i = 0; i < 50000000; i++) {
+    expensiveResult += i;
+  }
+
+  return (
+    <>
+      <Text>{`Expensive Result: ${expensiveResult}`}</Text>
+      <RNTesterButton onPress={() => setCount(count + 1)}>
+        {`Click me to count: ${count}`}
+      </RNTesterButton>
+    </>
+  );
+}
+
+function NotMemoizeExpensiveTaskExampleGoodExample(): React.Node {
+  const [count, setCount] = useState(0);
+
+  const expensiveResult = useMemo(() => {
+    let sum = 0;
+    for (let i = 0; i < 50000000; i++) {
+      sum += i;
+    }
+    return sum;
+  }, []);
+
+  return (
+    <>
+      <Text>{`Expensive Result: ${expensiveResult}`}</Text>
+      <RNTesterButton onPress={() => setCount(count + 1)}>
+        {`Click me to count: ${count}`}
+      </RNTesterButton>
+    </>
+  );
+}
+
+export default {
+  title:
+    'Expensive tasks should be memoized to avoid unnecessary long JS tasks',
+  description:
+    'Each re-render will run expensive job to get a result. The result should be memoized to avoid unnecessary re-computation',
+  Bad: NotMemoizeExpensiveTaskExampleBadExample,
+  Good: NotMemoizeExpensiveTaskExampleGoodExample,
+};

packages/rn-tester/js/examples/Performance/performanceComparisonExamples/index.js

@@ -13,3 +13,4 @@ export {default as ReRenderWithNonPureChildExample} from './ReRenderWithNonPureC
 export {default as ReRenderWithObjectPropExample} from './ReRenderWithObjectPropExample';
 export {default as SetStateInWrongEffectExample} from './SetStateInWrongEffectExample';
 export {default as RenderOffscreenContentExample} from './RenderOffscreenContentExample';
+export {default as NotMemoizeExpensiveTaskExample} from './NotMemoizeExpensiveTaskExample';