Optimizing Performance

{
  "expo": {
    "jsEngine": "hermes"
  }
}

import { Performance } from 'expo'; // <span class="badge badge--new">NEW</span>

// Enable performance monitoring
Performance.setPerformanceMonitoringEnabled(true);

// Monitor specific operations
Performance.startMonitoring('navigation');
Performance.startMonitoring('api-call');

<Image
  source={require('./assets/background.jpg')}
  blurRadius={10}
  style={{ width: 300, height: 200 }}
/>

import React from 'react';
import { FlatList, Text, View } from 'react-native';

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

const MyList = () => {
  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}
    />
  );
};

export default MyList;

import React, { useState } from 'react';
import { FlatList, Text, View } from 'react-native';

const MyList = () => {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);

  const loadMore = () => {
    if (loading) return;
    setLoading(true);
    // Simulate API call
    setTimeout(() => {
      const newItems = Array.from({ length: 10 }, (_, i) => ({
        id: (items.length + i + 1).toString(),
        name: `Item ${items.length + i + 1}`,
      }));
      setItems(prev => [...prev, ...newItems]);
      setLoading(false);
    }, 1000);
  };

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

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
    />
  );
};

export default MyList;

// ❌ Bad: Inline function in render
function MyComponent() {
  return (
    <View>
      <Button title="Press" onPress={() => console.log('pressed')} />
    </View>
  );
}

// ✅ Good: Defined outside render
const handlePress = () => console.log('pressed');

function MyComponent() {
  return (
    <View>
      <Button title="Press" onPress={handlePress} />
    </View>
  );
}

import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';\n\nconst AnimatedBox = () => {\n  const opacity = useSharedValue(1);\n\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      opacity: opacity.value,\n    };\n  });\n\n  const handlePress = () => {\n    opacity.value = withTiming(opacity.value === 1 ? 0 : 1, { duration: 500 });\n  };\n\n  return (\n    <Animated.View style={[animatedStyle, { width: 100, height: 100, backgroundColor: 'red' }]}>\n      <TouchableOpacity onPress={handlePress}>\n        <Text>Tap to animate</Text>\n      </TouchableOpacity>\n    </Animated.View>\n  );\n};

import 'react';
import 'expo';

const loadModule = async () => {
  const module = await import('./heavyModule');
  return module.default;
};

export default function App() {
  const [loadedModule, setLoadedModule] = useState(null);

  useEffect(() => {
    loadModule().then(setLoadedModule);
  }, []);

  return <View><Text>{loadedModule ? &#x27;Loaded&#x27; : &#x27;Loading...&#x27;}</Text></View>;
}

import { Asset } from 'expo-asset';

const asset = Asset.fromModule(require('./assets/image.jpg'));
const uri = asset.uri;

// Use the URI in an <Image> component
<Image source={{ uri }} style={{ width: 200, height: 200 }} />

expo build:android --release-channel production

expo build:ios --release-channel production

import React, { Profiler } from 'react';
import { View, Text } from 'expo';

function MyComponent() {
  return (
    <View>
      <Text>Hello World</Text>
    </View>
  );
}

function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime,
  interactions
) {
  console.log(&#x27;Component: &#x27; + id);
  console.log(&#x27;Phase: &#x27; + phase);
  console.log(&#x27;Actual Duration: &#x27; + actualDuration);
}

export default function App() {
  return (
    <Profiler id="MyComponent" onRender={onRenderCallback}>
      <MyComponent />
    </Profiler>
  );
}