Fork me on GitHub

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?


it includes timing info, along with analysis of message paths


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.


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


React DevTools has a pretty good profiler


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.


the closest you can probably get is componentDidUpdate / useLayoutEffect


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


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!


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


AFAIK componentDidUpdate == useLayoutEffect


Oh that might not help then :)


What I’ve been trying is to log 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.


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