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.

fixtures/flight/src/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {use, Suspense, useState, startTransition} from 'react';
+import {use, Suspense, useState, startTransition, Profiler} from 'react';
 import ReactDOM from 'react-dom/client';
 import {createFromFetch, encodeReply} from 'react-server-dom-webpack/client';
 
@@ -54,14 +54,20 @@ async function hydrateApp() {
     }
   );
 
-  ReactDOM.hydrateRoot(document, <Shell data={root} />, {
-    // TODO: This part doesn't actually work because the server only returns
-    // form state during the request that submitted the form. Which means it
-    // the state needs to be transported as part of the HTML stream. We intend
-    // to add a feature to Fizz for this, but for now it's up to the
-    // metaframework to implement correctly.
-    formState: formState,
-  });
+  ReactDOM.hydrateRoot(
+    document,
+    <Profiler id="root">
+      <Shell data={root} />
+    </Profiler>,
+    {
+      // TODO: This part doesn't actually work because the server only returns
+      // form state during the request that submitted the form. Which means it
+      // the state needs to be transported as part of the HTML stream. We intend
+      // to add a feature to Fizz for this, but for now it's up to the
+      // metaframework to implement correctly.
+      formState: formState,
+    }
+  );
 }
 
 // Remove this line to simulate MPA behavior

fixtures/ssr/src/index.js

@@ -1,6 +1,12 @@
 import React from 'react';
+import {Profiler} from 'react';
 import {hydrateRoot} from 'react-dom/client';
 
 import App from './components/App';
 
-hydrateRoot(document, <App assets={window.assetManifest} />);
+hydrateRoot(
+  document,
+  <Profiler id="root">
+    <App assets={window.assetManifest} />
+  </Profiler>
+);