fix bugs

Author: AlemTuzlak

package.json

@@ -32,8 +32,8 @@
 		"clean": "git clean -fdX .",
 		"clean:build": "git clean -fdx -e node_modules .",
 		"typecheck": "pnpm run --filter=\"./packages/**/*\" --parallel typecheck",
-		"test": "pnpm run test:ci",
-		"test:ci": "nx run-many --targets=test:unused,check,test:deps,test:lib,test:types,test:build,build",
+		"test": "nx run-many --targets=test:unused,check,test:deps,test:lib,test:types,test:build,build",
+		"test:ci": "nx run-many --targets=test:unused,test:deps,test:lib,test:types,test:build,build",
 		"test:cov": "pnpm run --filter=\"./packages/**/*\" --parallel test:cov",
 		"dev": "pnpm run watch",
 		"check": "biome check .",

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

@@ -1,3 +1,4 @@
+import { memo } from "react"
 import type { UIMatch } from "react-router"
 import { convertBigIntToString } from "../../shared/bigint-util.js"
 import { useSettingsContext } from "../context/useRDTContext.js"
@@ -28,7 +29,7 @@ const getLoaderData = (data: string | Record<string, any>) => {
 	return convertBigIntToString(data)
 }
 
-export const RouteSegmentInfo = ({ route, i }: { route: UIMatch<unknown, unknown>; i: number }) => {
+const RouteSegmentInfo = ({ route, i }: { route: UIMatch<unknown, unknown>; i: number }) => {
 	const { styles } = useStyles()
 
 	const isDev = typeof import.meta.hot !== "undefined"
@@ -126,3 +127,5 @@ export const RouteSegmentInfo = ({ route, i }: { route: UIMatch<unknown, unknown
 		</RouteSegmentCard>
 	)
 }
+
+export const MemoizedRouteSegmentInfo = memo(RouteSegmentInfo)

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react"
+import { memo, useEffect, useMemo, useRef, useState } from "react"
 import JsonView from "../../external/react-json-view/index.js"
 import { customTheme } from "../../external/react-json-view/theme/custom.js"
 import { useSettingsContext } from "../context/useRDTContext.js"
@@ -14,7 +14,7 @@ const isPromise = (value: any): value is Promise<any> => {
 	return value && typeof value.then === "function"
 }
 
-const JsonRenderer = ({ data, expansionLevel }: JsonRendererProps) => {
+const JsonRendererComponent = ({ data, expansionLevel }: JsonRendererProps) => {
 	const { styles } = useStyles()
 	const { settings } = useSettingsContext()
 	const ref = useRef(true)
@@ -73,4 +73,6 @@ const JsonRenderer = ({ data, expansionLevel }: JsonRendererProps) => {
 	)
 }
 
+const JsonRenderer = memo(JsonRendererComponent)
+
 export { JsonRenderer }

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

@@ -1,6 +1,7 @@
+import { useMemo } from "react"
 import { useMatches, useRevalidator } from "react-router"
 
-import { RouteSegmentInfo } from "../components/RouteSegmentInfo.js"
+import { MemoizedRouteSegmentInfo } from "../components/RouteSegmentInfo.js"
 import { TabContent } from "../components/TabContent.js"
 import { TabHeader } from "../components/TabHeader.js"
 import { Icon } from "../components/icon/Icon.js"
@@ -11,6 +12,9 @@ const PageTab = () => {
 	const routes = useMatches()
 	const { revalidate, state } = useRevalidator()
 
+	// Memoize reversed routes to avoid creating new array on every render
+	const reversedRoutes = useMemo(() => routes.toReversed(), [routes])
+
 	return (
 		<>
 			<TabHeader
@@ -30,8 +34,8 @@ const PageTab = () => {
 			<div className={styles.pageTab.content}>
 				<TabContent>
 					<ul className={cx(styles.pageTab.routesList, state === "loading" && styles.pageTab.routesListLoading)}>
-						{routes.toReversed().map((route, i) => (
-							<RouteSegmentInfo route={route} i={i} key={route.id} />
+						{reversedRoutes.map((route, i) => (
+							<MemoizedRouteSegmentInfo route={route} i={i} key={route.id} />
 						))}
 					</ul>
 				</TabContent>

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

@@ -1,4 +1,4 @@
-import { type MouseEvent, useEffect, useState } from "react"
+import { type MouseEvent, useCallback, useEffect, useMemo, useState } from "react"
 import { useMatches, useNavigate } from "react-router"
 import { eventClient } from "../../shared/event-client.js"
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/Accordion.js"
@@ -19,17 +19,23 @@ const RoutesTab = () => {
 	const { styles } = useStyles()
 	const matches = useMatches()
 	const navigate = useNavigate()
-	const activeRoutes = matches.map((match) => match.id)
+	// Memoize active routes to avoid recreating array on every render
+	const activeRoutes = useMemo(() => matches.map((match) => match.id), [matches])
 	const { settings } = useSettingsContext()
 	const { routeWildcards, routeViewMode } = settings
 	const [activeRoute, setActiveRoute] = useState<ExtendedRoute | null>(null)
 	const [routes, setRoutes] = useState<ExtendedRoute[]>(createExtendedRoutes() as ExtendedRoute[])
 	const [treeRoutes, setTreeRoutes] = useState(createRouteTree(window.__reactRouterManifest?.routes))
 	const isTreeView = routeViewMode === "tree"
-	const openNewRoute = (path: string) => (e?: MouseEvent<HTMLDivElement | HTMLButtonElement>) => {
-		e?.preventDefault()
-		navigate(path)
-	}
+
+	// Memoize openNewRoute callback to prevent recreating on every render
+	const openNewRoute = useCallback(
+		(path: string) => (e?: MouseEvent<HTMLDivElement | HTMLButtonElement>) => {
+			e?.preventDefault()
+			navigate(path)
+		},
+		[navigate]
+	)
 
 	useEffect(function fetchAllRoutesOnMount() {
 		// Listen for routes info response from the server FIRST