feat: improve perf (#246)

* feat: improve perf

* add memo for better perf, hide until open

* add memo for better perf, hide until open

* fix issue with statenodes

* fix issues

* additional perf improvements

* revert provider location

* version bump

Author: AlemTuzlak

packages/react-router-devtools/package.json

@@ -2,7 +2,7 @@
 	"name": "react-router-devtools",
 	"description": "Devtools for React Router - debug, trace, find hydration errors, catch bugs and inspect server/client data with react-router-devtools",
 	"author": "Alem Tuzlak",
-	"version": "6.1.0",
+	"version": "6.2.0",
 	"license": "MIT",
 	"keywords": [
 		"react-router",
@@ -131,6 +131,7 @@
 		"@babel/traverse": "^7.28.5",
 		"@babel/types": "^7.28.5",
 		"@radix-ui/react-accordion": "^1.2.12",
+		"@tanstack/devtools-client": "^0.0.5",
 		"@tanstack/devtools-event-client": "^0.4.0",
 		"@tanstack/devtools-vite": "^0.4.1",
 		"@tanstack/react-devtools": "^0.9.1",

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/components/Tag.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react"
+import { type ReactNode, memo } from "react"
 import { cx, useStyles } from "../styles/use-styles.js"
 
 export const TAG_COLORS = {
@@ -16,7 +16,7 @@ interface TagProps {
 	size?: "small" | "default"
 }
 
-const Tag = ({ color, children, className, size = "default" }: TagProps) => {
+const Tag = memo(({ color, children, className, size = "default" }: TagProps) => {
 	const { styles } = useStyles()
 	return (
 		<span
@@ -30,6 +30,6 @@ const Tag = ({ color, children, className, size = "default" }: TagProps) => {
 			{children}
 		</span>
 	)
-}
+})
 
 export { Tag }

packages/react-router-devtools/src/client/components/icon/Icon.tsx

@@ -1,4 +1,4 @@
-import type { SVGProps } from "react"
+import { type SVGProps, memo } from "react"
 import { cx } from "../../styles/use-styles.js"
 import { useStyles } from "../../styles/use-styles.js"
 import type { IconName } from "./icons/types.js"
@@ -30,7 +30,7 @@ const strokeIcon: Partial<IconName>[] = []
  * Icon component wrapper for SVG icons.
  * @returns SVG icon as a react component
  */
-export const Icon = ({ name, title, testId, className, size = "sm", ...props }: IconProps) => {
+export const Icon = memo(({ name, title, testId, className, size = "sm", ...props }: IconProps) => {
 	const { styles } = useStyles()
 	const iconSize = IconSize[size]
 	const isEmptyFill = emptyFill.includes(name)
@@ -316,4 +316,4 @@ export const Icon = ({ name, title, testId, className, size = "sm", ...props }:
 			<use href={`#${name}`} />
 		</svg>
 	)
-}
+})

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

@@ -14,7 +14,7 @@ const isPromise = (value: any): value is Promise<any> => {
 	return value && typeof value.then === "function"
 }
 
-const JsonRendererComponent = ({ data, expansionLevel }: JsonRendererProps) => {
+const JsonRendererComponent = memo(({ data, expansionLevel }: JsonRendererProps) => {
 	const { styles } = useStyles()
 	const { settings } = useSettingsContext()
 	const ref = useRef(true)
@@ -71,7 +71,7 @@ const JsonRendererComponent = ({ data, expansionLevel }: JsonRendererProps) => {
 	return (
 		<JsonView highlightUpdates style={customTheme} collapsed={expansionLevel ?? settings.expansionLevel} value={json} />
 	)
-}
+})
 
 const JsonRenderer = memo(JsonRendererComponent)
 

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"
@@ -10,18 +10,25 @@ 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 { devtoolsEventClient } from "@tanstack/devtools-client"
 import { RequestProvider } from "./context/requests/request-context.js"
 import { REACT_ROUTER_DEV_TOOLS } from "./utils/storage.js"
-
 export interface EmbeddedDevToolsProps extends ReactRouterDevtoolsProps {
 	mainPanelClassName?: string
 	className?: string
 }
-const Embedded = ({ mainPanelClassName, className }: EmbeddedDevToolsProps) => {
+const Embedded = memo(({ mainPanelClassName, className }: EmbeddedDevToolsProps) => {
 	useTimelineHandler()
 	useFindRouteOutlets()
 	useSetRouteBoundaries()
 
+	const [isOpen, setIsOpen] = useState(true)
+	useEffect(() => {
+		const cleanup = devtoolsEventClient.on("trigger-toggled", (e) => {
+			setIsOpen(e.payload.isOpen)
+		})
+		return cleanup
+	}, [])
 	return (
 		<div
 			id={REACT_ROUTER_DEV_TOOLS}
@@ -30,13 +37,15 @@ const Embedded = ({ mainPanelClassName, className }: EmbeddedDevToolsProps) => {
 			}}
 			className={clsx("react-router-dev-tools", "h-full flex-row w-full", className)}
 		>
-			<MainPanel className={mainPanelClassName} isEmbedded isOpen={true}>
-				<Tabs />
-				<ContentPanel />
-			</MainPanel>
+			{isOpen ? (
+				<MainPanel className={mainPanelClassName} isEmbedded isOpen={true}>
+					<Tabs />
+					<ContentPanel />
+				</MainPanel>
+			) : null}
 		</div>
 	)
-}
+})
 
 let hydrating = true
 

packages/react-router-devtools/src/client/hooks/useReactTreeListeners.ts

@@ -21,7 +21,7 @@ export function useFindRouteOutlets() {
 	const styleNearestElement = useCallback((fiberNode: any) => {
 		if (!fiberNode) return
 
-		if (fiberNode.stateNode) {
+		if (typeof fiberNode?.stateNode?.classList?.add === "function") {
 			return fiberNode.stateNode.classList.add(ROUTE_CLASS)
 		}
 		styleNearestElement(fiberNode.child)

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

@@ -1,10 +1,10 @@
-import { Fragment } from "react"
+import { Fragment, memo } from "react"
 import { useTabs } from "../hooks/useTabs.js"
 import { cx } from "../styles/use-styles.js"
 import { useStyles } from "../styles/use-styles.js"
 import { TimelineTab } from "../tabs/TimelineTab.js"
 
-const ContentPanel = () => {
+const ContentPanel = memo(() => {
 	const { Component, hideTimeline, activeTab } = useTabs()
 	const { styles } = useStyles()
 
@@ -29,6 +29,6 @@ const ContentPanel = () => {
 			)}
 		</div>
 	)
-}
+})
 
 export { ContentPanel }

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

@@ -1,3 +1,4 @@
+import { memo } from "react"
 import { cx } from "../styles/use-styles.js"
 import { useStyles } from "../styles/use-styles.js"
 
@@ -8,7 +9,7 @@ interface MainPanelProps {
 	className?: string
 }
 
-const MainPanel = ({ children, isOpen, className }: MainPanelProps) => {
+const MainPanel = memo(({ children, isOpen, className }: MainPanelProps) => {
 	const { styles } = useStyles()
 
 	return (
@@ -26,6 +27,6 @@ const MainPanel = ({ children, isOpen, className }: MainPanelProps) => {
 			{children}
 		</div>
 	)
-}
+})
 
 export { MainPanel }

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,39 +12,41 @@ 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 Tabs = memo(() => {
 	const { settings } = useSettingsContext()
 	const { styles } = useStyles()
 	const { activeTab } = settings
@@ -59,6 +62,6 @@ const Tabs = () => {
 			</div>
 		</div>
 	)
-}
+})
 
 export { Tabs }