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} />, {
+  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>
+);