feat: improve perf

Author: AlemTuzlak

packages/react-router-devtools/src/client/embedded-dev-tools.tsx

@@ -10,7 +10,6 @@ import { Tabs } from "./layout/Tabs.js"
 import type { ReactRouterDevtoolsProps } from "./react-router-dev-tools.js"
 // Import to ensure global reset styles are injected
 import "./styles/use-styles.js"
-import { RequestProvider } from "./context/requests/request-context.js"
 import { REACT_ROUTER_DEV_TOOLS } from "./utils/storage.js"
 
 export interface EmbeddedDevToolsProps extends ReactRouterDevtoolsProps {
@@ -58,9 +57,7 @@ const EmbeddedDevTools = ({ config, mainPanelClassName, className }: EmbeddedDev
 
 	return (
 		<RDTContextProvider config={config}>
-			<RequestProvider>
-				<Embedded mainPanelClassName={mainPanelClassName} className={className} />
-			</RequestProvider>
+			<Embedded mainPanelClassName={mainPanelClassName} className={className} />
 		</RDTContextProvider>
 	)
 }

packages/react-router-devtools/src/client/tabs/NetworkTab.tsx

@@ -1,10 +1,17 @@
 import { TabHeader } from "../components/TabHeader.js"
 import { Icon } from "../components/icon/Icon.js"
 import NetworkPanel from "../components/network-tracer/NetworkPanel.js"
-import { useRequestContext } from "../context/requests/request-context.js"
+import { RequestProvider, useRequestContext } from "../context/requests/request-context.js"
 import { useStyles } from "../styles/use-styles.js"
 
 export const NetworkTab = () => {
+	return (
+		<RequestProvider>
+			<NetworkTabBase />
+		</RequestProvider>
+	)
+}
+const NetworkTabBase = () => {
 	const { styles } = useStyles()
 	const { requests, removeAllRequests, isLimitReached } = useRequestContext()