How do i display the time taken to render a list in react native?-CodePudding

I am generating a list of random strings and rendering using FlatList in react native , but i want to display how long it takes to render that list also . How can i do that in react native ?

const [list,setList] = useState([]);

  useEffect(()=>{
    let rList=[];
    for(let i=0;i<1000;i  ){
      rList =[...rList,Math.random().toString(36).slice(2, 7)]
    }
    console.log((new Date() - start)/86400000);
    setList(rList);
    clearTimeout() 
    
  },[])
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.boldHeader}>Header</Text>
      </View>
      <View style={styles.body}>
          <FlatList 
          data = {list}
          renderItem = {({item})=>(
            <Text>{item}</Text>
          )}
          />

      </View>
    </View>
  );

CodePudding user response：

Implement onLayout prop for the Text component to measure the span of time it takes between rendering the first text and the last text in the list.

For example,

type IRandomList = string[];
type IDuration = {
  start?: Date;
  end?: Date;
};
const useMeasureDurationCallback = (list: any[]) => {
  const iRef = useRef<number>(0);
  const durationRef = useRef<IDuration>({});
  const [duration, setDuration] = useState<number>();
  const measure = useCallback(() => {
    if (iRef.current === 0) {
      durationRef.current.start = new Date();
    }
    if (iRef.current   1 === list.length) {
      durationRef.current.end = new Date();
    }
    if (durationRef.current.start && durationRef.current.end) {
      setDuration(durationRef.current.end - durationRef.current.start);
    }
    iRef.current  ;
  }, [durationRef, list]);
  return [duration, measure];
};
const TextInANest = () => {
  const [list, setList] = useState<IRandomList>([]);
  const [duration, onLayout] = useMeasureDurationCallback(list);
  useEffect(() => {
    const rList: IRandomList = [];
    for (let i = 0; i < 1000; i  ) {
      rList.push(Math.random().toString(36).slice(2, 7));
    }
    setList(rList);
    clearTimeout();
  }, []);
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text>{duration}</Text>
        <Text style={styles.boldHeader}>Header</Text>
      </View>
      <View style={styles.body}>
        <FlatList
          data={list}
          renderItem={({
            item,
            index,
          }: {
            item: IRandomList;
            index: number;
          }) => {
            return <Text onLayout={onLayout}>{item}</Text>;
          }}
        />
      </View>
    </View>
  );
};

Try out Snack

CodePudding user response：

const TextInANest = ({data}) => {


 const [duration, setDuration] = useState<number>();
  const [start, setStart] = useState<number>();

  useEffect(() => {
    setStart(Date.now());
  }, []);
  
  useEffect(() => {
    if (start && data.length) {
      setDuration(Date.now() - start);
    }
  }, [data]);

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text>{duration}</Text>
        <Text style={styles.boldHeader}>Header</Text>
      </View>
      <View style={styles.body}>
        <FlatList
          data={data}
          renderItem={({item, index}) => <Text>{item}</Text>}
          onEndReached={() => loadMoreData()}
          onViewableItemsChanged={() => measureDuration()}
        />
      </View>
    </View>
  );
};