Estoy tratando de agregar algo de registro para ver cuánto tiempo se tarda en renderizar un componente funcional en React. La parte complicada para mí es cómo saber realmente cuándo se ha renderizado el componente. Por "renderizado", significa que el usuario puede verlo en la interfaz (deben mostrarse todas las partes de ese componente). Estoy tratando de usar useEffect para lograr esto, ya que puede indicar cuándo está montado el componente.
El código es algo como a continuación:
function showComponent() { console.log('start rendering....start timer'); console.log(new Date().getTime()); setStoreViewState('foobar'); } observer(function Component() { React.useEffect(() => { console.log('rendering complete....stop timer'); console.log(new Date().getTime()); }, []); ...... const thingsToShow = getStoreViewState(); return (<div>{thingsToShow}</div>) }Me pregunto si esta es una forma precisa de lograr esto. ¡Gracias!
De acuerdo con los documentos, useEffect sin dependencia significa que ha terminado de renderizarse.
https://reactjs.org/docs/hooks-effect.html
Also, don't forget that React defers running useEffect until after the browser has painted, so doing extra work is less of a problem.
La cita anterior es de los documentos.