Add Profiler mode to fixtures even if React DevTools is not installed (#31877)
Currently you need to do one of either: 1. Install React DevTools 2. Install React Refresh 3. Add Profiler component To opt in to component level profiling. It was a bit confusing that some of the fixtures was doing 2 which made them work while other was depending on if you had DevTools. Really React Refresh shouldn't really opt you in I think.
Sebastian Markbåge committed
Dec 28, 2024 at 02:01 UTC
d4ac7689f94f8ed53b779a651d62a2b9af20e6c0
2 files changed
+22
-10
fixtures/flight/src/index.js
+15
-9
@@ -1,5 +1,5 @@
1
import * as React from 'react';
2
-import {use, Suspense, useState, startTransition} from 'react';
2
+import {use, Suspense, useState, startTransition, Profiler} from 'react';
3
import ReactDOM from 'react-dom/client';
4
import {createFromFetch, encodeReply} from 'react-server-dom-webpack/client';
5
@@ -54,14 +54,20 @@ async function hydrateApp() {
54
}
55
);
56
57
- ReactDOM.hydrateRoot(document, <Shell data={root} />, {
58
- // TODO: This part doesn't actually work because the server only returns
59
- // form state during the request that submitted the form. Which means it
60
- // the state needs to be transported as part of the HTML stream. We intend
61
- // to add a feature to Fizz for this, but for now it's up to the
62
- // metaframework to implement correctly.
63
- formState: formState,
64
- });
57
+ ReactDOM.hydrateRoot(
58
+ document,
59
+ <Profiler id="root">
60
+ <Shell data={root} />
61
+ </Profiler>,
62
+ {
63
+ // TODO: This part doesn't actually work because the server only returns
64
+ // form state during the request that submitted the form. Which means it
65
+ // the state needs to be transported as part of the HTML stream. We intend
66
+ // to add a feature to Fizz for this, but for now it's up to the
67
+ // metaframework to implement correctly.
68
+ formState: formState,
69
+ }
70
+ );
71
}
72
73
// Remove this line to simulate MPA behavior
fixtures/ssr/src/index.js
+7
-1
@@ -1,6 +1,12 @@
1
import React from 'react';
2
+import {Profiler} from 'react';
3
import {hydrateRoot} from 'react-dom/client';
4
5
import App from './components/App';
6
6
-hydrateRoot(document, <App assets={window.assetManifest} />);
7
+hydrateRoot(
8
+ document,
9
+ <Profiler id="root">
10
+ <App assets={window.assetManifest} />
11
+ </Profiler>
12
+);