From d99c9913548b147b99c09f06938397da92e13aa0 Mon Sep 17 00:00:00 2001
From: Xin Chen <xch@meta.com>
Date: Tue, 22 Aug 2023 15:47:37 -0700
Subject: [PATCH] Add example to compare memoize expensive JS task (#38831)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/38831

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

Reviewed By: NickGerleman

Differential Revision: D48048033

fbshipit-source-id: 7f13961b3f015a35b818deabacf9a0f6a3ca0013
---
 .../NotMemoizeExpensiveTaskExample.js         | 66 +++++++++++++++++++
 .../performanceComparisonExamples/index.js    |  1 +
 2 files changed, 67 insertions(+)
 create mode 100644 packages/rn-tester/js/examples/Performance/performanceComparisonExamples/NotMemoizeExpensiveTaskExample.js

diff --git a/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/NotMemoizeExpensiveTaskExample.js b/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/NotMemoizeExpensiveTaskExample.js
new file mode 100644
index 00000000000000..da54a78a8b4b14
--- /dev/null
+++ b/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,
+};
diff --git a/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/index.js b/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/index.js
index 8313d2274cb71b..55156aacf042ad 100644
--- a/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/index.js
+++ b/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';