A minimalistic ClojureScript interface to React.js
shaun-mahood 2020-05-02T00:30:07.342500Z

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?


it includes timing info, along with analysis of message paths

shaun-mahood 2020-05-02T00:42:14.346500Z

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


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

lilactown 2020-05-02T00:44:42.347600Z

React DevTools has a pretty good profiler

shaun-mahood 2020-05-02T00:48:34.350200Z

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.

lilactown 2020-05-02T00:49:21.350900Z

the closest you can probably get is componentDidUpdate / useLayoutEffect

lilactown 2020-05-02T00:49:32.351200Z

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

shaun-mahood 2020-05-02T00:52:10.354200Z

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!

lilactown 2020-05-02T00:53:46.354900Z

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

lilactown 2020-05-02T00:53:55.355300Z

AFAIK componentDidUpdate == useLayoutEffect

shaun-mahood 2020-05-02T00:54:10.355700Z

Oh that might not help then :)

shaun-mahood 2020-05-02T00:57:48.360100Z

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.

shaun-mahood 2020-05-02T01:01:35.361800Z

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