Add example to not render offscreen content (#38800)

Summary:
Pull Request resolved: #38800

Changelog:
[General][Internal] - Add performance comparison example to not render offscreen content

Reviewed By: rshest

Differential Revision: D47892462

fbshipit-source-id: dd5bbd83c3baaf229c4b6fea89904cf4bb7b37de

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

@@ -0,0 +1,36 @@
+/**
+ * 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 ItemList from '../components/ItemList';
+import {LIST_100_ITEMS} from '../components/itemData';
+
+const ItemListMemo = React.memo(ItemList);
+
+function RenderOffscreenContentBadExample(): React.Node {
+  return <ItemListMemo data={LIST_100_ITEMS} />;
+}
+
+function RenderOffscreenContentGoodExample(): React.Node {
+  return (
+    <ItemListMemo useFlatList data={LIST_100_ITEMS} initialNumToRender={2} />
+  );
+}
+
+export default {
+  title: 'Do not render offscreen content',
+  description:
+    'Render long list with ScrollView vs FlatList + initialNumToRender prop.\nNever render offscreen content when not needed.',
+  Bad: RenderOffscreenContentBadExample,
+  Good: RenderOffscreenContentGoodExample,
+};

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

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