App.js

// In App.js in a new project

import React, {useEffect, useState} from 'react';
import {View, Text, Button, TouchableOpacity} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
// import {enableScreens} from 'react-native-screens';
// enableScreens();
const computeResult = () => {
  let result = 0;
  for (let i = 0; i < 100000000; i++) {
    result += i;
  }
  return result;
};
function Sub() {
  console.log(`Sub Render`);

  return <Text>Sub</Text>;
}
const ExpensiveComponent = () => {
  const [result, setResult] = React.useState(null);
  // function computeHeavey() {
  //     const finalResult = ;
  //   ;
  // }
  React.useEffect(() => {
    setResult(computeResult());
  }, []);
  // React.useLayoutEffect(() => {
  //   setResult(computeResult());
  // }, []);

  // React.startTransition(() => {
  //   // const finalResult = computeResult();
  //   // setResult(finalResult);
  //   console.log('startTransition');
  // });
  console.log(`ExpensiveComponent: ${result}`);

  return (
    <View>
      <Sub />
      <Text style={{fontSize: 20, fontWeight: 'bold', marginBottom: 10}}>
        Expensive Component
      </Text>
      {result ? (
        <Text style={{fontSize: 16}}>Result: {result}</Text>
      ) : (
        <Text style={{fontSize: 16}}>Computing...</Text>
      )}
    </View>
  );
};
export const MyComponent = () => {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (loading) {
      computeResult();
      setLoading(false);
    }
  }, [loading]);

  const onPress = () => setLoading(true);

  return (
    <Button onPress={onPress} title={loading ? 'Loading...' : 'Press Me'} />
  );
};
function HomeScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Home Screen</Text>

      <MyComponent />
      <Button
        title="Go to Details..."
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}
function DetailsScreen({navigation}) {
  // try {
  //   const data = await fetch('https://example.com/data').then(response => response.json());
  // } catch (error) {
  //   console.log(error,'error');
  // }

  // console.log(navigation);
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Details Screen</Text>
      <ExpensiveComponent />
      <Button
        title="Go to Home"
        onPress={() =>
          navigation.navigate('Home', {
            itemId: 86,
          })
        }
      />
    </View>
  );
}
const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;