chore: cleanup examples

examples/native-cli/src/AsyncComponent.perf-test.tsx → examples/native-cli/src/AsyncComponent.perf.tsx

@@ -6,7 +6,7 @@ import { AsyncComponent } from './AsyncComponent';
 
 jest.setTimeout(600_000);
 
-test('RN CLI - AsyncComponent 10 runs', async () => {
+test('RN CLI - AsyncComponent (10 runs)', async () => {
   const scenario = async () => {
     const button = screen.getByText('Action');
 
@@ -18,7 +18,7 @@ test('RN CLI - AsyncComponent 10 runs', async () => {
   await measureRenders(<AsyncComponent />, { scenario, runs: 10 });
 });
 
-test('RN CLI - AsyncComponent 50 runs', async () => {
+test('RN CLI - AsyncComponent (50 runs)', async () => {
   const scenario = async () => {
     const button = screen.getByText('Action');
 

examples/native-cli/src/AsyncComponent.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, Text, Pressable } from 'react-native';
-import { SlowList } from './SlowList';
+import { TestList } from './TestList';
 
 export function AsyncComponent() {
   const [count, setCount] = React.useState(0);
@@ -17,7 +17,7 @@ export function AsyncComponent() {
 
       <Text>Count: {count}</Text>
 
-      <SlowList count={200} />
+      <TestList count={200} />
     </View>
   );
 }

examples/native-cli/src/TestList.perf.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { jest, test } from '@jest/globals';
+import { measureRenders } from 'reassure';
+import { TestList } from './TestList';
+
+jest.setTimeout(60_000);
+
+test('RN CLI - TestList (100 items)', async () => {
+  await measureRenders(<TestList count={100} />);
+});

examples/native-cli/src/SlowList.test.tsx → examples/native-cli/src/TestList.test.tsx

@@ -1,9 +1,10 @@
+import * as React from 'react';
 import { render, screen } from '@testing-library/react-native';
 import { expect, test } from '@jest/globals';
-import { SlowList } from './SlowList';
+import { TestList } from './TestList';
 
-test('SlowList', () => {
-  render(<SlowList count={10} />);
+test('TestList', () => {
+  render(<TestList count={10} />);
 
   const items = screen.getAllByText(/Item/i);
   expect(items).toHaveLength(10);

examples/native-cli/src/TestList.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+
+interface TestListProps {
+  count: number;
+}
+
+export const TestList = ({ count }: TestListProps) => {
+  const data = Array.from({ length: count }, (_, index) => index);
+
+  return (
+    <View>
+      {data.map(item => (
+        <ListItem key={item} title={`Item ${item}`} />
+      ))}
+    </View>
+  );
+};
+
+interface ListItemProps {
+  title: string;
+}
+
+const ListItem = ({ title }: ListItemProps) => {
+  // Uncomment to introduce a performance issue
+  // const [, forceRender] = React.useState<{}>();
+  // React.useEffect(() => {
+  //   forceRender({});
+  // }, [title]);
+
+  return (
+    <View>
+      <Text>{title}</Text>
+    </View>
+  );
+};

examples/native-expo/src/AsyncComponent.perf-test.tsx → examples/native-expo/src/AsyncComponent.perf.tsx

@@ -6,7 +6,7 @@ import { AsyncComponent } from './AsyncComponent';
 
 jest.setTimeout(600_000);
 
-test('RN Expo - AsyncComponent 10 runs', async () => {
+test('React Native - Expo - AsyncComponent (10 runs)', async () => {
   const scenario = async () => {
     const button = screen.getByText('Action');
 
@@ -18,7 +18,7 @@ test('RN Expo - AsyncComponent 10 runs', async () => {
   await measureRenders(<AsyncComponent />, { scenario, runs: 10 });
 });
 
-test('RN Expo - AsyncComponent 50 runs', async () => {
+test('React Native - Expo - AsyncComponent (50 runs)', async () => {
   const scenario = async () => {
     const button = screen.getByText('Action');
 

examples/native-expo/src/AsyncComponent.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { View, Text, Pressable } from 'react-native';
-import { SlowList } from './SlowList';
+import { TestList } from './TestList';
 
 export function AsyncComponent() {
   const [count, setCount] = React.useState(0);
 
   const handlePress = () => {
-    setTimeout(() => setCount(c => c + 1), 10);
+    setTimeout(() => setCount((c) => c + 1), 10);
   };
 
   return (
@@ -17,7 +17,7 @@ export function AsyncComponent() {
 
       <Text>Count: {count}</Text>
 
-      <SlowList count={200} />
+      <TestList count={200} />
     </View>
   );
 }

examples/native-expo/src/TestList.perf.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { jest, test } from '@jest/globals';
+import { measureRenders } from 'reassure';
+import { TestList } from './TestList';
+
+jest.setTimeout(60_000);
+
+test('React Native - Expo - TestList (100 items)', async () => {
+  await measureRenders(<TestList count={100} />, { runs: 10 });
+});

examples/native-expo/src/SlowList.test.tsx → examples/native-expo/src/TestList.test.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react-native';
-import { SlowList } from './SlowList';
+import { TestList } from './TestList';
 
-test('SlowList', () => {
-  render(<SlowList count={10} />);
+test('TestList', () => {
+  render(<TestList count={10} />);
 
   const items = screen.getAllByText(/Item/i);
   expect(items).toHaveLength(10);

examples/native-expo/src/TestList.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+
+interface TestListProps {
+  count: number;
+}
+
+export const TestList = ({ count }: TestListProps) => {
+  const data = Array.from({ length: count }, (_, index) => index);
+
+  return (
+    <View>
+      {data.map((item) => (
+        <ListItem key={item} title={`Item ${item}`} />
+      ))}
+    </View>
+  );
+};
+
+interface ListItemProps {
+  title: string;
+}
+
+const ListItem = ({ title }: ListItemProps) => {
+  // Uncomment to introduce a performance issue
+  // const [, forceRender] = React.useState<{}>();
+  // React.useEffect(() => {
+  //   forceRender({});
+  // }, [title]);
+
+  return (
+    <View>
+      <Text>{title}</Text>
+    </View>
+  );
+};

examples/web-nextjs/src/components/AsyncComponent.perf-test.tsx → examples/web-nextjs/src/components/AsyncComponent.perf.tsx

@@ -1,12 +1,11 @@
-// @ts-expect-error Needed for Jest testing
 import * as React from 'react';
 import { fireEvent, screen } from '@testing-library/react';
 import { measureRenders } from 'reassure';
 import { AsyncComponent } from './AsyncComponent';
 
 jest.setTimeout(60_000);
 
-test('Web Next.js - AsyncComponent 10 runs', async () => {
+test('Web Next.js - AsyncComponent (10 runs)', async () => {
   const scenario = async () => {
     const button = screen.getByText('Action');
 
@@ -25,7 +24,7 @@ test('Web Next.js - AsyncComponent 10 runs', async () => {
   await measureRenders(<AsyncComponent />, { scenario, runs: 10 });
 });
 
-test('Web Next.js - AsyncComponent 50 runs', async () => {
+test('Web Next.js - AsyncComponent (50 runs)', async () => {
   const scenario = async () => {
     const button = screen.getByText('Action');
 

examples/web-nextjs/src/components/AsyncComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SlowList } from './SlowList';
+import { TestList } from './TestList';
 
 export function AsyncComponent() {
   const [count, setCount] = React.useState(0);
@@ -13,7 +13,7 @@ export function AsyncComponent() {
       <button onClick={handlePress}>Action</button>
       <span>Count: {count}</span>
 
-      <SlowList count={200} />
+      <TestList count={200} />
     </div>
   );
 }

examples/web-nextjs/src/components/TestList.perf.tsx

@@ -0,0 +1,10 @@
+// @ts-expect-error Needed for Jest testing
+import * as React from 'react';
+import { measureRenders } from 'reassure';
+import { TestList } from './TestList';
+
+jest.setTimeout(60_000);
+
+test('Web Next.js - TestList (100 items)', async () => {
+  await measureRenders(<TestList count={100} />, { runs: 10 });
+});