Fork me on GitHub
#reagent
<
2020-05-02
>
shaun-mahood00:05:07

I’m trying to figure out how to get the timing of when a component is rendered on screen - I’ve been able to get reasonable numbers for most of the react lifecycle parts but would like something as close as possible to the actual screen paint. Any ideas or resources I should look at?

noisesmith00:05:55

it includes timing info, along with analysis of message paths

shaun-mahood00:05:14

I’ve not tried the recent versions - will have to take a look. I’m hoping to be able to match it up with the timing in the devtools profiler, but maybe I’m going overkill on it.

noisesmith00:05:18

the fact that it's from the same group as reframe is a good sign

lilactown00:05:42

React DevTools has a pretty good profiler

shaun-mahood00:05:34

Yeah, I’ve used re-frame-10x a lot - not working super well on this project, plus I’ve gotten curious about how to do it now. Trying to see if I can wrap a component and log all the relevant info to match up to what chrome devtools and react devtools are telling me.

lilactown00:05:21

the closest you can probably get is componentDidUpdate / useLayoutEffect

lilactown00:05:32

those fire synchronously after commit (doing operations to the DOM)

shaun-mahood00:05:10

Part of what I’ve been trying is seeing if I can log when the animation frames fire - I’ve got logging on either side of it. Haven’t seen useLayoutEffect before though, thanks for the ideas!

lilactown00:05:46

probably not, since the computer is doing the animation during that time 😛

lilactown00:05:55

AFAIK componentDidUpdate == useLayoutEffect

shaun-mahood00:05:10

Oh that might not help then :)

shaun-mahood00:05:48

What I’ve been trying is to log performance.now on either side of the relevant things - one of the blogs on react metrics discussed using requestAnimationFrame to get close, but from what I’ve been looking at I think Reagent is already doing stuff related to that so my translation of the react code isn’t really working like I hoped.

shaun-mahood01:05:35

Oh, and I forgot to mention - the end goal is to be able to record performance metrics, which is why I can’t only rely on the re-frisk or 10x - I keep having to remind myself of that too :)