Question 33243 in React native Question posted in
The official React Native documentation can be found here.

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

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>
  );
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0 
    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>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search