0

I want to get the time when a table is rendered with its Data, Is this code I can correctly get the time? I don't know when useEffect triggered with tableDataRenderedTime, will that data has been updated to table


const [tableData,setTableData] = useState([])
const [tableDataRenderedTime,setTableDataRenderedTime] = useState(false)


useEffect(()=>{

...
const data = await getData({...})
setTableData(data)
setTableDataRenderedTime(true) // <---- 
...


},[])

useEffect(()=>{
 const time = performance.now() // <---- Is this the time when the table renderd with new Data??

},[tableDataRenderedTime])



return (

<TableComponent data={data}/>
)
Pasindu Dilshan
  • 366
  • 1
  • 15
user956609
  • 906
  • 7
  • 22
  • What's the react native version you're using ? [performance.now()](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now) API may not work in release builds. – Pasindu Dilshan Aug 29 '21 at 08:07
  • Im using Reactjs in html5 @PasinduDilshan is this method correct to get the time the table data rendered? – user956609 Aug 30 '21 at 03:55

1 Answers1

0

performance.now() is relative to the page load. If you need to get the exact time when table was rendered you can use Date.now().

...
useEffect(()=>{
 const time = Date.now() // Exact time in milliseconds when table data gets updated. (milliseconds elapsed since January 1, 1970)

},[tableDataRenderedTime])
...

Here's a good SO thread on performance.now() vs Date.now().

performance.now() is useful if you need to measure the time taken to update table data. To do so within first useEffect hook, you can do following.

const [tableData,setTableData] = useState([]);

useEffect(() => {
...
  const t0 = performance.now();
  const data = await getData({...});
  setTableData(data);
  setTableDataRenderedTime(true);
  const t1 = performance.now();
  const duration = t1 - t0 // Time elapsed to load table data
...
});
Pasindu Dilshan
  • 366
  • 1
  • 15
  • I don't know the mechanism in Reactjs(batch update..or something related to how it rendered)，after ```setTableDataRenderedTime(true) ``` ， I tried to get time in an effect hook ，it this the correct timing I want?(the exact time table has been renderd with new data..) – user956609 Aug 31 '21 at 13:33