fix issues

Author: AlemTuzlak

packages/react-router-devtools/src/client/components/TabContent.tsx

@@ -1,10 +1,11 @@
+import { memo } from "react"
 import { useStyles } from "../styles/use-styles.js"
 
 interface TabContentProps {
 	children: React.ReactNode
 }
 
-export const TabContent = ({ children }: TabContentProps) => {
+export const TabContent = memo(({ children }: TabContentProps) => {
 	const { styles } = useStyles()
 	return <div className={styles.tabContent.container}>{children}</div>
-}
+})

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

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import { useEffect, useState } from "react"
+import { memo, useEffect, useState } from "react"
 import { RDTContextProvider } from "./context/RDTContext.js"
 import { useFindRouteOutlets } from "./hooks/useReactTreeListeners.js"
 import { useSetRouteBoundaries } from "./hooks/useSetRouteBoundaries.js"
@@ -16,7 +16,7 @@ export interface EmbeddedDevToolsProps extends ReactRouterDevtoolsProps {
 	mainPanelClassName?: string
 	className?: string
 }
-const Embedded = ({ mainPanelClassName, className }: EmbeddedDevToolsProps) => {
+const Embedded = memo(({ mainPanelClassName, className }: EmbeddedDevToolsProps) => {
 	useTimelineHandler()
 	useFindRouteOutlets()
 	useSetRouteBoundaries()
@@ -44,7 +44,7 @@ const Embedded = ({ mainPanelClassName, className }: EmbeddedDevToolsProps) => {
 			) : null}
 		</div>
 	)
-}
+})
 
 let hydrating = true
 

packages/react-router-devtools/src/client/layout/Tabs.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react"
 import { useSettingsContext } from "../context/useRDTContext.js"
 import { useHorizontalScroll } from "../hooks/useHorizontalScroll.js"
 import { useTabs } from "../hooks/useTabs.js"
@@ -11,37 +12,39 @@ declare global {
 	}
 }
 
-const Tab = ({
-	tab,
-	activeTab,
-	className,
-	onClick,
-}: {
-	tab: TabType
-	activeTab?: string
-	className?: string
-	onClick?: () => void
-}) => {
-	const { setSettings } = useSettingsContext()
-	const { styles } = useStyles()
+const Tab = memo(
+	({
+		tab,
+		activeTab,
+		className,
+		onClick,
+	}: {
+		tab: TabType
+		activeTab?: string
+		className?: string
+		onClick?: () => void
+	}) => {
+		const { setSettings } = useSettingsContext()
+		const { styles } = useStyles()
 
-	return (
-		<button
-			data-testid={tab.id}
-			onClick={() => (onClick ? onClick() : setSettings({ activeTab: tab.id as TabsType }))}
-			title={typeof tab.name === "string" ? tab.name : undefined}
-			type="button"
-			className={cx(
-				"group",
-				styles.layout.tabs.tab,
-				activeTab !== tab.id && styles.layout.tabs.tabInactive,
-				activeTab === tab.id && styles.layout.tabs.tabActive
-			)}
-		>
-			<div className={cx(className, styles.layout.tabs.tabIcon)}>{tab.icon}</div>
-		</button>
-	)
-}
+		return (
+			<button
+				data-testid={tab.id}
+				onClick={() => (onClick ? onClick() : setSettings({ activeTab: tab.id as TabsType }))}
+				title={typeof tab.name === "string" ? tab.name : undefined}
+				type="button"
+				className={cx(
+					"group",
+					styles.layout.tabs.tab,
+					activeTab !== tab.id && styles.layout.tabs.tabInactive,
+					activeTab === tab.id && styles.layout.tabs.tabActive
+				)}
+			>
+				<div className={cx(className, styles.layout.tabs.tabIcon)}>{tab.icon}</div>
+			</button>
+		)
+	}
+)
 
 const Tabs = () => {
 	const { settings } = useSettingsContext()

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

@@ -50,7 +50,7 @@ const RoutesTab = () => {
 			}
 
 			// Add root from manifest
-			routeObject.root = window.__reactRouterManifest?.routes?.root
+			routeObject.root = { ...window.__reactRouterManifest?.routes?.root }
 
 			// Update tree view routes with merged data
 			setTreeRoutes(createRouteTree(routeObject))
@@ -63,9 +63,7 @@ const RoutesTab = () => {
 		// Request routes info from the server AFTER listener is set up
 		eventClient.emit("routes-tab-mounted", {})
 
-		return () => {
-			unsubscribe()
-		}
+		return unsubscribe
 	}, [])
 	return (
 		<div className={styles.routesTab.wrapper}>

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

@@ -1,3 +1,4 @@
+import { memo } from "react"
 import { TabContent } from "../components/TabContent.js"
 import { TabHeader } from "../components/TabHeader.js"
 import { type TAG_COLORS, Tag } from "../components/Tag.js"
@@ -17,7 +18,7 @@ const Translations: Record<TimelineEvent["type"], string> = {
 	FETCHER_RESPONSE: "Fetcher action response",
 }
 
-const RedirectEventComponent = (event: RedirectEvent) => {
+const RedirectEventComponent = memo((event: RedirectEvent) => {
 	const { styles } = useStyles()
 	return (
 		<div className={styles.timelineTab.eventContainer}>
@@ -31,9 +32,9 @@ const RedirectEventComponent = (event: RedirectEvent) => {
 			)}
 		</div>
 	)
-}
+})
 
-const FormEventComponent = (event: FormEvent) => {
+const FormEventComponent = memo((event: FormEvent) => {
 	const { styles } = useStyles()
 	const isRedirect = event.type === "ACTION_REDIRECT"
 	const responseData = event.responseData
@@ -73,7 +74,7 @@ const FormEventComponent = (event: FormEvent) => {
 			</div>
 		</div>
 	)
-}
+})
 
 export const METHOD_COLORS: Record<string, keyof typeof TAG_COLORS> = {
 	GET: "GREEN",