How to record Perf mesures on every single render?

[slorber]

I have an app with a framework very similar to Om where I always render from the top component.
There is no Flux store with components listening to a single Flux store event, just a single global json state managed outside of React.

I ask this question as a follow-up to this issue, as I just noticed that React.render takes a callback: #1931

My former Perf code looked like this:

// 1st render
React.addons.Perf.start();
React.render(<App state=globalState/>, document.body);
React.addons.Perf.stop();
React.addons.Perf.printWasted();

// 2nd render
React.addons.Perf.start();
React.render(<App state=globalState/>, document.body);
React.addons.Perf.stop();
React.addons.Perf.printWasted();

// ... next renders

So as Render takes a callback it seems to make sens to use it instead of considering React.render synchronous.

// 1st render
React.addons.Perf.start();
React.render(<App state=globalState/>, document.body),function() {
    React.addons.Perf.stop();
    React.addons.Perf.printWasted();
});


// 2nd render
React.addons.Perf.start();
React.render(<App state=globalState/>, document.body),function() {
    React.addons.Perf.stop();
    React.addons.Perf.printWasted();
});

// ... next renders

The question that directly comes to mind is what would be the behavior if the 2nd rendering is triggered before the 1st rendering callback has been called?

In an ideal world we would have start / stop / printWasted / start / stop / printWasted but it seem to me that we could also have start / start / stop / printWasted / stop / printWasted which could lead to bad or duplicated mesures, or even worse a failure if Perf does not allow to be started twice for example...

I think my usecase is pretty common for those using React in a really pure way, and it would be nice to explain and document how this can be achieved without expecting weird side effects

[jimfb]

cc @spicyj @sebmarkbage.

[slorber]

any idea @sebmarkbage ?

[slorber]

nobody has any idea on this?

[koba04]

BTW, Is it possible to call asynchronously a callback passed to React.render?
It seems to be called always synchronously.

[slorber]

@koba04 why is it a bad thing? you can still use setTimeout if you need to.
Btw I'm not so sure about that, but maybe in simple usecases it's sync? don't know I didn't see that documented but it would be nice to know.

[koba04]

@slorber

I just wonder the reason why React.render receive a callback.

The question that directly comes to mind is what would be the behavior if the 2nd rendering is triggered before the 1st rendering callback has been called?

Is it possible to reproduce this?
I think this doesn't occur because the callback is called synchronously except using setTimeout.

[slorber]

@koba04 actually it seems you are right. In my complex app the callback seems to be called synchronously.

It's not very clear but I guess React does not guarantee synchronicity in the future as they may change this behavior later? Like if they decide to use something like requestAnimationFrame in the future maybe?

[sophiebits]

Updates happen asynchronously when calling React.render with a new React element on the same container. We might start batching initial renders too.

[slorber]

nice to know.
What do you mean by "new react element" @spicyj ?

[sophiebits]

The result of React.createElement or any JSX expression.

[slorber]

@spicyj I wasn't asking for the definition of ReactElement but rather what does it mean to have a new element for a container?

React.render(<Hello/>,node)
React.render(<Hello/>,node)
React.render(<World/>,node)

Do you mean that for the 3st render the callback will be called asynchronously?

[sophiebits]

For the second and third renders there, I believe it's async.

[slorber]

thanks

[gaearon]

ReactPerf doesn't work in 16 and we'll need to reevaluate the approach before introducing something like it again. I think we can close this since it's specific to the old ReactPerf.

[rekha110254]

@gaearon So how can i get Perf results in latest version of react?