bamlab / react-native-flipper-performance-monitor

An attempt to have a lighthouse for React Native. Flipper plugin to show a graph of the React Native performance monitor
MIT License
584 stars 17 forks source link

Page score might require updation #89

Open HimanshuNarang opened 1 year ago

HimanshuNarang commented 1 year ago

Hello, I created a sample app for mocking the js thread blocking with infinite loop, after running the app I could see that UI is not being drawn and user input was not being served, but surprisingly after stopping the page score measuring I got the page score 99 although complete UI was blocked and user couldn't see any update on the display. I am not sure which factor need to use for updating the page score formula but it was the case which should be handled in the formula.

Blocking Code:

` import React, { useEffect, useState } from 'react'; import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, View, } from 'react-native';

import { Colors, DebugInstructions, Header, LearnMoreLinks, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen';

/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's

const App = () => { const [name, setName] = useState("xyz")

const backgroundStyle = { backgroundColor: Colors.lighter, };

useEffect(()=>{ // setTimeout(()=>{ let t = 1 while(t < 100000){ setName("infinite loop, js thread blocked") setTimeout(() => { t++; }, 200); } // },1000) })

return (

Edit {name}
Read the docs to discover what to do next:

); };

const styles = StyleSheet.create({ sectionContainer: { marginTop: 32, paddingHorizontal: 24, }, sectionTitle: { fontSize: 24, fontWeight: '600', }, sectionDescription: { marginTop: 8, fontSize: 18, fontWeight: '400', }, highlight: { fontWeight: '700', }, });

export default App; `