Skip to content

Instantly share code, notes, and snippets.

@saleehk
Created June 15, 2023 06:00
Show Gist options
  • Save saleehk/e89d9b2a1350bd3455164360a4ce0ddc to your computer and use it in GitHub Desktop.
Save saleehk/e89d9b2a1350bd3455164360a4ce0ddc to your computer and use it in GitHub Desktop.
// 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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment