Bug: Bad running order with server-side-render inline script tag inside Suspense component

[chestnutchen]

React version: 18.0.0

Steps To Reproduce

1. Server side render with an inline script inside Suspense component:

<LazyComponent>
    <p>some async text</p>
    <script
        dangerouslySetInnerHTML={{
            __html: "/** some performace measure code here */ console.log('measure');"
        }}
    ></script>
</LazyComponent>

<Suspense fallback={<Spinner />}>
    <LazyComponent />
</Suspense>

2. And 'measure' will be logged before <p> is inserted into right place and being visible.

Link to code example: https://codesandbox.io/s/mystifying-stallman-z7hveu?file=/src/Comments.js

The current behavior

Logging 'measure' before <p> is inserted into right place and being visible.

The expected behavior

Logging 'measure' after <p> is inserted into right place and being visible.

[eps1lon]

If you want to measure performance you're most likely better off using React.Profiler like so <LazyComponent><React.Profiler id="some-p" onRender={handleRender}><p></p></React.Profiler></LazyComponent>

Logging 'measure' after

is inserted into right place and being visible.

Could you describe the exact timing and why it is important for your case?

[chestnutchen]

@eps1lon

1. React.Profiler is disabled in the production build while we aim to measure performance of online users access, calling visibility speed statistic may be better.
2. Code here for other purpose may depend on CSSOM or DOMRect of <p>. And the HTML attribute hidden will break some values of CSSOM and DOMRect.

[eps1lon]

React.Profiler is disabled in the production build while we aim to measure performance of online users access, calling visibility speed statistic may be better.

There's a special profiling build that you may be interested in. See How to use profiling in production mode for react-dom for how to enable it for react-dom. The approach is similar in react-native.

Code here for other purpose may depend on CSSOM or DOMRect of

. And the HTML attribute hidden will break some values of CSSOM and DOMRect.

Could you elaborate more on the exact timing that you're seeing now and that you'd rather see?