⚡ Optimize PlatformPicker with React.memo (#217)

* Optimize PlatformPicker with React.memo to prevent unnecessary re-renders

Co-authored-by: xRahul <1639945+xRahul@users.noreply.github.com>

* Fix lint errors in PlatformPickerBenchmark test

Co-authored-by: xRahul <1639945+xRahul@users.noreply.github.com>

---------

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
Co-authored-by: xRahul <1639945+xRahul@users.noreply.github.com>

Author: xRahul

__tests__/PlatformPickerBenchmark.test.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import PlatformPicker from '../src/components/PlatformPicker';
+
+const mockPickerRender = jest.fn();
+
+jest.mock('react-native', () => {
+  const ReactLib = require('react');
+  const View = props => ReactLib.createElement('View', props, props.children);
+  const Text = props => ReactLib.createElement('Text', props, props.children);
+  const Picker = props => {
+    mockPickerRender();
+    return ReactLib.createElement('Picker', props, props.children);
+  };
+  Picker.Item = props => ReactLib.createElement('Picker.Item', props);
+
+  return {
+    View,
+    Text,
+    Picker,
+    StyleSheet: {
+      create: obj => obj,
+      flatten: obj => obj,
+    },
+    Platform: {
+      OS: 'ios',
+      select: obj => obj.ios,
+    },
+  };
+});
+
+describe('PlatformPicker Performance', () => {
+  test('renders repeatedly', () => {
+    mockPickerRender.mockClear();
+    const handler = () => {};
+    const selectedValue = 'mobile';
+
+    // Initial render
+    const component = renderer.create(
+      <PlatformPicker selectedValue={selectedValue} onValueChange={handler} />,
+    );
+
+    expect(mockPickerRender).toHaveBeenCalledTimes(1);
+
+    const start = Date.now();
+
+    // Update 5000 times
+    for (let i = 0; i < 5000; i++) {
+      component.update(
+        <PlatformPicker
+          selectedValue={selectedValue}
+          onValueChange={handler}
+        />,
+      );
+    }
+
+    const end = Date.now();
+    console.log(`Benchmark Duration: ${end - start}ms`);
+    console.log(`Picker Render Count: ${mockPickerRender.mock.calls.length}`);
+  });
+});

src/components/PlatformPicker.js

@@ -22,4 +22,4 @@ const PlatformPicker = ({selectedValue, onValueChange}) => {
   );
 };
 
-export default PlatformPicker;
+export default React.memo(PlatformPicker);