<p dir="auto">I have an app with a framework very similar to Om where I always render from the top component.<br>
There is no Flux store with components listening to a single Flux store event, just a single global json state managed outside of React.</p>
<p dir="auto">I ask this question as a follow-up to this issue, as I just noticed that React.render takes a callback: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="38751908" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/1931" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/1931/hovercard" href="https://github.com/facebook/react/issues/1931">#1931</a></p>
<p dir="auto">My former Perf code looked like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// 1st render
React.addons.Perf.start();
React.render(&lt;App state=globalState/&gt;, document.body);
React.addons.Perf.stop();
React.addons.Perf.printWasted();

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

// ... next renders"><pre class="notranslate"><span class="pl-c">// 1st render</span>
<span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">addons</span><span class="pl-kos">.</span><span class="pl-c1">Perf</span><span class="pl-kos">.</span><span class="pl-en">start</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">App</span> <span class="pl-c1">state</span><span class="pl-c1">=</span><span class="pl-c1">globalState</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">addons</span><span class="pl-kos">.</span><span class="pl-c1">Perf</span><span class="pl-kos">.</span><span class="pl-en">stop</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">addons</span><span class="pl-kos">.</span><span class="pl-c1">Perf</span><span class="pl-kos">.</span><span class="pl-en">printWasted</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// 2nd render</span>
<span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">addons</span><span class="pl-kos">.</span><span class="pl-c1">Perf</span><span class="pl-kos">.</span><span class="pl-en">start</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">App</span> <span class="pl-c1">state</span><span class="pl-c1">=</span><span class="pl-c1">globalState</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">addons</span><span class="pl-kos">.</span><span class="pl-c1">Perf</span><span class="pl-kos">.</span><span class="pl-en">stop</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">addons</span><span class="pl-kos">.</span><span class="pl-c1">Perf</span><span class="pl-kos">.</span><span class="pl-en">printWasted</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// ... next renders</span></pre></div>
<p dir="auto">So as Render takes a callback it seems to make sens to use it instead of considering React.render synchronous.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// 1st render
React.addons.Perf.start();
React.render(&lt;App state=globalState/&gt;, document.body),function() {
    React.addons.Perf.stop();
    React.addons.Perf.printWasted();
});


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

// ... next renders"><pre class="notranslate"><span class="pl-c">// 1st render</span>
<span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">addons</span><span class="pl-kos">.</span><span class="pl-c1">Perf</span><span class="pl-kos">.</span><span class="pl-en">start</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">App</span> <span class="pl-c1">state</span><span class="pl-c1">=</span><span class="pl-c1">globalState</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">)</span><span class="pl-kos">,</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">addons</span><span class="pl-kos">.</span><span class="pl-c1">Perf</span><span class="pl-kos">.</span><span class="pl-en">stop</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">addons</span><span class="pl-kos">.</span><span class="pl-c1">Perf</span><span class="pl-kos">.</span><span class="pl-en">printWasted</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>


<span class="pl-c">// 2nd render</span>
<span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">addons</span><span class="pl-kos">.</span><span class="pl-c1">Perf</span><span class="pl-kos">.</span><span class="pl-en">start</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">App</span> <span class="pl-c1">state</span><span class="pl-c1">=</span><span class="pl-c1">globalState</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">)</span><span class="pl-kos">,</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">addons</span><span class="pl-kos">.</span><span class="pl-c1">Perf</span><span class="pl-kos">.</span><span class="pl-en">stop</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">addons</span><span class="pl-kos">.</span><span class="pl-c1">Perf</span><span class="pl-kos">.</span><span class="pl-en">printWasted</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// ... next renders</span></pre></div>
<p dir="auto">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?</p>
<p dir="auto">In an ideal world we would have <code class="notranslate">start / stop / printWasted / start / stop / printWasted</code> but it seem to me that we could also have <code class="notranslate">start / start / stop / printWasted / stop / printWasted</code> which could lead to bad or duplicated mesures, or even worse a failure if Perf does not allow to be started twice for example...</p>
<p dir="auto">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</p>
<p dir="auto">React version: 17.0.1</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Use latest react and check chrome console</li>
</ol>
<h2 dir="auto">Issue</h2>
<p dir="auto">[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021. See <a href="https://developer.chrome.com/blog/enabling-shared-array-buffer/" rel="nofollow">https://developer.chrome.com/blog/enabling-shared-array-buffer/</a> for more details.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="scheduler.development.js:298 [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.
(anonymous) @ scheduler.development.js:298
./node_modules/scheduler/cjs/scheduler.development.js @ scheduler.development.js:843
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:61
./node_modules/scheduler/index.js @ index.js:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:61
(anonymous) @ react-dom.development.js:18
./node_modules/react-dom/cjs/react-dom.development.js @ react-dom.development.js:26261
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:61
./node_modules/react-dom/index.js @ index.js:37
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:61
./src/app.jsx @ main.f06688de3ff4e6385b93.js:12
__webpack_require__ @ bootstrap:24
__webpack_exec__ @ main.f06688de3ff4e6385b93.js:1490
(anonymous) @ main.f06688de3ff4e6385b93.js:1491
__webpack_require__.O @ chunk loaded:25
(anonymous) @ main.f06688de3ff4e6385b93.js:1492
webpackJsonpCallback @ jsonp chunk loading:522
(anonymous) @ main.f06688de3ff4e6385b93.js:1
log.js:24 [HMR] Waiting for update signal from WDS..."><pre class="notranslate"><code class="notranslate">scheduler.development.js:298 [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.
(anonymous) @ scheduler.development.js:298
./node_modules/scheduler/cjs/scheduler.development.js @ scheduler.development.js:843
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:61
./node_modules/scheduler/index.js @ index.js:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:61
(anonymous) @ react-dom.development.js:18
./node_modules/react-dom/cjs/react-dom.development.js @ react-dom.development.js:26261
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:61
./node_modules/react-dom/index.js @ index.js:37
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:61
./src/app.jsx @ main.f06688de3ff4e6385b93.js:12
__webpack_require__ @ bootstrap:24
__webpack_exec__ @ main.f06688de3ff4e6385b93.js:1490
(anonymous) @ main.f06688de3ff4e6385b93.js:1491
__webpack_require__.O @ chunk loaded:25
(anonymous) @ main.f06688de3ff4e6385b93.js:1492
webpackJsonpCallback @ jsonp chunk loading:522
(anonymous) @ main.f06688de3ff4e6385b93.js:1
log.js:24 [HMR] Waiting for update signal from WDS...
</code></pre></div>