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 ( + <> + {`Expensive Result: ${expensiveResult}`} + setCount(count + 1)}> + {`Click me to count: ${count}`} + + + ); +} + +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 ( + <> + {`Expensive Result: ${expensiveResult}`} + setCount(count + 1)}> + {`Click me to count: ${count}`} + + + ); +} + +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';