mirror of
https://github.com/zebrajr/react.git
synced 2025-12-06 12:20:20 +01:00
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.
This commit is contained in:
parent
4309bde2b4
commit
d4ac7689f9
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user