Clojurians Log v2

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?

@shaun-mahood have you looked at re-frisk? https://nicedoc.io/flexsurfer/re-frisk

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.

@shaun-mahood I've used this one, it seems decent so far https://github.com/day8/re-frame-10x

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 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.

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