Skip to content

Commit 650c475

Browse files
AlemTuzlakAlemTuzlak
committed
additional perf improvements
1 parent 11a486a commit 650c475

File tree

6 files changed

+114
-108
lines changed

6 files changed

+114
-108
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const isPromise = (value: any): value is Promise<any> => {
1414
return value && typeof value.then === "function"
1515
}
1616

17-
const JsonRendererComponent = ({ data, expansionLevel }: JsonRendererProps) => {
17+
const JsonRendererComponent = memo(({ data, expansionLevel }: JsonRendererProps) => {
1818
const { styles } = useStyles()
1919
const { settings } = useSettingsContext()
2020
const ref = useRef(true)
@@ -71,7 +71,7 @@ const JsonRendererComponent = ({ data, expansionLevel }: JsonRendererProps) => {
7171
return (
7272
<JsonView highlightUpdates style={customTheme} collapsed={expansionLevel ?? settings.expansionLevel} value={json} />
7373
)
74-
}
74+
})
7575

7676
const JsonRenderer = memo(JsonRendererComponent)
7777

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { Fragment } from "react"
1+
import { Fragment, memo } from "react"
22
import { useTabs } from "../hooks/useTabs.js"
33
import { cx } from "../styles/use-styles.js"
44
import { useStyles } from "../styles/use-styles.js"
55
import { TimelineTab } from "../tabs/TimelineTab.js"
66

7-
const ContentPanel = () => {
7+
const ContentPanel = memo(() => {
88
const { Component, hideTimeline, activeTab } = useTabs()
99
const { styles } = useStyles()
1010

@@ -29,6 +29,6 @@ const ContentPanel = () => {
2929
)}
3030
</div>
3131
)
32-
}
32+
})
3333

3434
export { ContentPanel }

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { memo } from "react"
12
import { cx } from "../styles/use-styles.js"
23
import { useStyles } from "../styles/use-styles.js"
34

@@ -8,7 +9,7 @@ interface MainPanelProps {
89
className?: string
910
}
1011

11-
const MainPanel = ({ children, isOpen, className }: MainPanelProps) => {
12+
const MainPanel = memo(({ children, isOpen, className }: MainPanelProps) => {
1213
const { styles } = useStyles()
1314

1415
return (
@@ -26,6 +27,6 @@ const MainPanel = ({ children, isOpen, className }: MainPanelProps) => {
2627
{children}
2728
</div>
2829
)
29-
}
30+
})
3031

3132
export { MainPanel }

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const Tab = memo(
4646
}
4747
)
4848

49-
const Tabs = () => {
49+
const Tabs = memo(() => {
5050
const { settings } = useSettingsContext()
5151
const { styles } = useStyles()
5252
const { activeTab } = settings
@@ -62,6 +62,6 @@ const Tabs = () => {
6262
</div>
6363
</div>
6464
)
65-
}
65+
})
6666

6767
export { Tabs }

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const PageTab = () => {
1313
const { revalidate, state } = useRevalidator()
1414

1515
// Memoize reversed routes to avoid creating new array on every render
16-
const reversedRoutes = useMemo(() => routes.toReversed(), [routes])
16+
const reversedRoutes = useMemo(() => [...routes.toReversed()], [routes])
1717

1818
return (
1919
<>

‎test-apps/react-router-vite/app/root.tsx‎

Lines changed: 103 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,103 @@
1-
import {
2-
type ActionFunctionArgs,
3-
data,
4-
Links,
5-
type LoaderFunctionArgs,
6-
Meta,
7-
Outlet,
8-
Scripts,
9-
ScrollRestoration,
10-
} from "react-router";
11-
import { userSomething } from "./modules/user.server";
12-
13-
// Server middleware
14-
const authMiddleware = async (args: any, next: () => Promise<Response>) => {
15-
console.log("Auth middleware - checking authentication");
16-
return next();
17-
}
18-
19-
const loggingMiddleware = async (args: any, next: () => Promise<Response>) => {
20-
console.log("Logging middleware - request:", args.request.url);
21-
const response = await next();
22-
console.log("Logging middleware - response status:", response.status);
23-
return response;
24-
}
25-
26-
export const middleware = [authMiddleware, loggingMiddleware];
27-
28-
// Client middleware
29-
const clientAuthMiddleware = async (args: any, next: () => Promise<Response>) => {
30-
console.log("Client auth middleware - checking client-side authentication");
31-
return next();
32-
}
33-
34-
const clientLoggingMiddleware = async (args: any, next: () => Promise<Response>) => {
35-
console.log("Client logging middleware - request:", args.request.url);
36-
const response = await next();
37-
console.log("Client logging middleware - response status:", response.status);
38-
return response;
39-
}
40-
41-
export const clientMiddleware = [
42-
clientAuthMiddleware,
43-
clientLoggingMiddleware,
44-
];
45-
46-
export const links = () => [];
47-
48-
export const loader = ({context, devTools }: LoaderFunctionArgs) => {
49-
userSomething();
50-
const mainPromise = new Promise((resolve, reject) => {
51-
setTimeout(() => {
52-
const subPromise = new Promise((resolve, reject) => {
53-
setTimeout(() => {
54-
resolve("test");
55-
}, 2000);
56-
});
57-
resolve({ test: "test", subPromise});
58-
}, 2000);
59-
});
60-
console.log("loader called");
61-
const end =devTools?.tracing.start("test")!;
62-
end();
63-
return data({ message: "Hello World", mainPromise, bigInt: BigInt(10) }, );
64-
}
65-
66-
export const action =async ({devTools}: ActionFunctionArgs) => {
67-
const end = devTools?.tracing.start("action submission")
68-
await new Promise((resolve, reject) => {
69-
setTimeout(() => {
70-
resolve("test");
71-
}, 2000);
72-
});
73-
end?.();
74-
console.log("action called");
75-
return ({ message: "Hello World", bigInt: BigInt(10) });
76-
}
77-
78-
function App() {
79-
return (
80-
<html lang="en">
81-
<head>
82-
<meta charSet="utf-8" />
83-
<meta name="viewport" content="width=device-width, initial-scale=1" />
84-
<Meta />
85-
<Links />
86-
</head>
87-
<body style={{margin: 0}}>
88-
89-
<Outlet />
90-
<ScrollRestoration />
91-
<Scripts />
92-
93-
</body>
94-
</html>
95-
);
96-
}
97-
98-
export { App as default }
1+
import type { Route } from "./+types/root";
2+
import {
3+
type ActionFunctionArgs,
4+
data,
5+
Links,
6+
type LoaderFunctionArgs,
7+
Meta,
8+
Outlet,
9+
Scripts,
10+
ScrollRestoration } from
11+
"react-router";
12+
import { userSomething } from "./modules/user.server";
13+
14+
// Server middleware
15+
const authMiddleware = async (args: any, next: () => Promise<Response>) => {
16+
console.log("Auth middleware - checking authentication");
17+
return next();
18+
};
19+
20+
const loggingMiddleware = async (args: any, next: () => Promise<Response>) => {
21+
console.log("Logging middleware - request:", args.request.url);
22+
const response = await next();
23+
console.log("Logging middleware - response status:", response.status);
24+
return response;
25+
};
26+
27+
export const middleware: Route.MiddlewareFunction[] = [authMiddleware, loggingMiddleware];
28+
29+
// Client middleware
30+
const clientAuthMiddleware = async (args: any, next: () => Promise<Response>) => {
31+
console.log("Client auth middleware - checking client-side authentication");
32+
return next();
33+
};
34+
35+
const clientLoggingMiddleware = async (args: any, next: () => Promise<Response>) => {
36+
console.log("Client logging middleware - request:", args.request.url);
37+
const response = await next();
38+
console.log("Client logging middleware - response status:", response.status);
39+
return response;
40+
};
41+
42+
export const clientMiddleware: Route.ClientMiddlewareFunction[] = [
43+
clientAuthMiddleware,
44+
clientLoggingMiddleware];
45+
46+
47+
export const links = () => [];
48+
49+
export const loader = ({ context, devTools }: LoaderFunctionArgs) => {
50+
userSomething();
51+
const mainPromise = new Promise((resolve, reject) => {
52+
setTimeout(() => {
53+
const subPromise = new Promise((resolve, reject) => {
54+
setTimeout(() => {
55+
resolve("test");
56+
}, 2000);
57+
});
58+
resolve({ test: "test", subPromise });
59+
}, 2000);
60+
});
61+
console.log("loader called");
62+
const end = devTools?.tracing.start("test")!;
63+
end();
64+
return data({ message: "Hello World", mainPromise, bigInt: BigInt(10) });
65+
};
66+
67+
export const action = async ({ devTools }: ActionFunctionArgs) => {
68+
const end = devTools?.tracing.start("action submission");
69+
await new Promise((resolve, reject) => {
70+
setTimeout(() => {
71+
resolve("test");
72+
}, 2000);
73+
});
74+
end?.();
75+
console.log("action called");
76+
return { message: "Hello World", bigInt: BigInt(10) };
77+
};
78+
79+
function App() {
80+
return (
81+
<html lang="en">
82+
<head>
83+
<script
84+
crossOrigin="anonymous"
85+
src="//unpkg.com/react-scan/dist/auto.global.js">
86+
</script>
87+
<meta charSet="utf-8" />
88+
<meta name="viewport" content="width=device-width, initial-scale=1" />
89+
<Meta />
90+
<Links />
91+
</head>
92+
<body style={{ margin: 0 }}>
93+
94+
<Outlet />
95+
<ScrollRestoration />
96+
<Scripts />
97+
98+
</body>
99+
</html>);
100+
101+
}
102+
103+
export { App as default };

0 commit comments

Comments
 (0)