Optimizing Performance

import React, { memo } from 'react';

const ExpensiveComponent = memo(({ count }) => {
  console.log("ExpensiveComponent rendered");
  return <div>Count: {count}</div>;
});

export default ExpensiveComponent;

import React, { memo } from 'react';

const CustomComponent = memo(({ data, title }) => {
  return <div>{title}: {data}</div>;
}, (prevProps, nextProps) => {
  return prevProps.data === nextProps.data;
});

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Skip re-render if props or state haven't changed
    return nextProps.data !== this.props.data ||
           nextState.count !== this.state.count;
  }

  render() {
    return <div>{this.props.data} - {this.state.count}</div>;
  }
}

import React from 'react';
import { FlatList } from 'react-native';

const renderItem = ({ item }) => (
  <View style={{ padding: 10 }}>
    <Text>{item.name}</Text>
  </View>
);

const MyFlatList = () => {
  const data = [
    { id: '1', name: 'Item 1' },
    { id: '2', name: 'Item 2' },
    { id: '3', name: 'Item 3' },
  ];

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
    />
  );
};

import React from 'react';
import { FlatList } from 'react-native';

const renderItem = ({ item }) => (
  <View style={{ padding: 10 }}>
    <Text>{item.name}</Text>
  </View>
);

const OptimizedFlatList = () => {
  const data = Array.from({ length: 1000 }, (_, i) => ({
    id: i.toString(),
    name: `Item ${i}`,
  }));

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      windowSize={5}
      maxToRenderPerBatch={10}
      initialNumToRender={10}
    />
  );
};

const MyComponent = ({ items, onPress }) => {
  // ❌ Bad: Inline function creates new instance each render
  const renderItem = ({ item }) => (
    <TouchableOpacity onPress={() => onPress(item)}>
      <Text>{item.title}</Text>
    </TouchableOpacity>
  );

  return <FlatList data={items} renderItem={renderItem} />;
};

// ✅ Good: Move function outside component
const MyComponent = ({ items, onPress }) => {
  const handlePress = (item) => onPress(item);

  const renderItem = ({ item }) => (
    <TouchableOpacity onPress={() => handlePress(item)}>
      <Text>{item.title}</Text>
    </TouchableOpacity>
  );

  return <FlatList data={items} renderItem={renderItem} />;
};

const MyComponent = ({ title }) => {
  // ❌ Bad: Inline object creates new instance each render
  return <View style={{ backgroundColor: 'red', padding: 10 }}>
    <Text style={{ fontSize: 16, color: 'white' }}>{title}</Text>
  </View>;
};

// ✅ Good: Define styles outside component
const containerStyle = {
  backgroundColor: 'red',
  padding: 10,
};

const textStyle = {
  fontSize: 16,
  color: 'white',
};

const MyComponent = ({ title }) => (
  <View style={containerStyle}>
    <Text style={textStyle}>{title}</Text>
  </View>
);

import React, { useCallback } from 'react';

const Button = ({ onClick }) => {
  return <button onClick={onClick}>Click me</button>;
};

const ParentComponent = () => {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

  return <Button onClick={handleClick} />;
};

import React, { useMemo } from 'react';

const ExpensiveComponent = ({ data }) => {
  const expensiveValue = useMemo(() => {
    // Simulate expensive calculation
    return data.reduce((sum, item) => sum + item.value, 0);
  }, [data]);

  return <div>Sum: {expensiveValue}</div>;
};

import React from 'react';
import { Image, StyleSheet } from 'react-native';

const OptimizedImage = () => {
  return (
    <Image
      source={{ uri: 'https://example.com/image.jpg' }}
      style={styles.image}
      resizeMode="cover"
    />
  );
};

const styles = StyleSheet.create({
  image: {
    width: 300,
    height: 200,
  },
});

export default OptimizedImage;

import React, { useEffect } from 'react';
import { Image } from 'react-native';

const preloadImage = (uri) => {
  Image.prefetch(uri);
};

const MyComponent = () => {
  useEffect(() => {
    preloadImage('https://example.com/image.jpg');
  }, []);

  return <Image source={{ uri: 'https://example.com/image.jpg' }} />;
};

import { lazy, Suspense } from 'react';
import { ActivityIndicator, View } from 'react-native';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback=<View style={{ flex: 1, justifyContent: 'center' }}><ActivityIndicator /></View>>
      <HeavyComponent />
    </Suspense>
  );
}

// In android/app/build.gradle
project.ext.react = [
    entryFile: "index.js",
    enableHermes: true  // Enable Hermes
]

// In ios/Podfile
use_react_native!(
  :hermes_enabled => true
)

import React, { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback="<div>Loading...</div>">
      <HeavyComponent />
    </Suspense>
  );
}

// In your app entry point
import { AppRegistry } from 'react-native';
import { App } from './App';

// Wrap your app with the profiling provider
const ProfilingApp = () => {
  return <App />;
};

AppRegistry.registerComponent('MyApp', () => ProfilingApp);

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Profile" component={ProfileScreen} lazy={true} />
</Stack.Navigator>