@@ -263,9 +214,9 @@ const useMetrics = () => {
const componentId = React.useMemo(() => String.fromCharCode(i++), []);
const withTiming = React.useContext(TimingContext);
- const log = React.useCallback(
+ const boundLog = React.useCallback(
(message: string) => {
- measureTiming(
+ log(
`%cComponent ${componentId}: ${message}`,
`color: ${color}`,
withTiming
@@ -274,18 +225,18 @@ const useMetrics = () => {
[withTiming]
);
- log("render");
+ boundLog("render");
const [s, forceUpdate] = React.useState({});
React.useMemo(function useMemo() {
- log("useMemo");
+ boundLog("useMemo");
}, []);
React.useInsertionEffect(
function useInsertionEffect() {
- log("useInsertionEffect");
+ boundLog("useInsertionEffect");
return function useInsertionEffect_cleanup() {
- log("useInsertionEffect cleanup");
+ boundLog("useInsertionEffect cleanup");
};
},
[s]
@@ -293,9 +244,9 @@ const useMetrics = () => {
React.useLayoutEffect(
function useLayoutEffect() {
- log("useLayoutEffect");
+ boundLog("useLayoutEffect");
return function useLayoutEffect_cleanup() {
- log("useLayoutEffect cleanup");
+ boundLog("useLayoutEffect cleanup");
};
},
[s]
@@ -303,15 +254,15 @@ const useMetrics = () => {
React.useEffect(
function useEffect() {
- log("useEffect");
+ boundLog("useEffect");
return function useEffect_cleanup() {
- log("useEffect cleanup");
+ boundLog("useEffect cleanup");
};
},
[s]
);
- return { log, color, componentId, forceUpdate };
+ return { log: boundLog, color, componentId, forceUpdate };
};
function FunctionWithMetrics({
@@ -403,21 +354,39 @@ export default function App() {
);
const Example: (() => JSX.Element) | undefined = examples[example!];
- const [withTiming, setTiming] = React.useState(false);
+ const [withTimings, setTiming] = React.useState(false);
+ const [withTasks, setTasks] = React.useState(false);
+ const contextValue = React.useMemo(
+ () => ({ timings: withTimings, tasks: withTasks }),
+ [withTimings, withTasks]
+ );
return (
- Timing {withTiming ? "enabled " : "disabled "}
+ Timing {withTimings ? "enabled " : "disabled "}
+
+
+
+ Tasks {withTasks ? "enabled " : "disabled "}
@@ -444,9 +413,11 @@ export default function App() {
))}
-
+
- {Example && }
+ {Example && (
+
+ )}
diff --git a/src/components/page-react-timings/tasks.ts b/src/components/page-react-timings/tasks.ts
new file mode 100644
index 0000000..98a0e07
--- /dev/null
+++ b/src/components/page-react-timings/tasks.ts
@@ -0,0 +1,96 @@
+const div = document.createElement("div");
+document.body.appendChild(div);
+
+export function syncTask(cb: (type: string) => void) {
+ (function syncCallback() {
+ cb("sync");
+ })();
+}
+export function microTask(cb: (type: string) => void) {
+ queueMicrotask(function microTaskCallback() {
+ cb("micro task");
+ });
+}
+export function userBlockingTask(cb: (type: string) => void) {
+ scheduler.postTask(
+ function userBlockingTaskCallback() {
+ cb("task (user-blocking)");
+ },
+ { priority: "user-blocking" }
+ );
+}
+export function userVisibleTask(cb: (type: string) => void) {
+ scheduler.postTask(
+ function userVisibleTaskCallback() {
+ cb("task (user-visible)");
+ },
+ { priority: "user-visible" }
+ );
+}
+export function backgroundTask(cb: (type: string) => void) {
+ scheduler.postTask(
+ function backgroundTaskCallback() {
+ cb("task (background)");
+ },
+ { priority: "background" }
+ );
+}
+export function animationTask(cb: (type: string) => void) {
+ requestAnimationFrame(function animationTaskCallback() {
+ cb("animation frame");
+ });
+}
+
+export function startAllTasks(cb: (type: string) => void) {
+ syncTask(cb);
+ microTask(cb);
+ userBlockingTask(cb);
+ userVisibleTask(cb);
+ backgroundTask(cb);
+ animationTask(cb);
+}
+
+function getNow(timings: boolean) {
+ if (!timings) {
+ return "";
+ }
+
+ return (
+ "Now: " +
+ performance.now().toFixed(1) +
+ "ms | Timeline: " +
+ document.timeline.currentTime +
+ "ms | "
+ );
+}
+
+export function log(
+ label: string,
+ color: string,
+ {
+ tasks,
+ timings = false,
+ }: {
+ tasks?: boolean;
+ timings?: boolean;
+ } = {}
+) {
+ if (!tasks) {
+ console.log(getNow(timings) + label, color);
+ return;
+ }
+
+ const timingStyle = [
+ "font-style: italic; text-decoration-line: underline",
+ "",
+ ];
+
+ const cb = (type: string) =>
+ console.log(
+ getNow(timings) + "%c" + type + "%c " + label,
+ ...timingStyle,
+ color
+ );
+
+ startAllTasks(cb);
+}
--
2.51.2
From 63eb3d2adc52fd9889df09af45f06f3ae73842b7 Mon Sep 17 00:00:00 2001
From: Ayc0
Date: Tue, 21 May 2024 16:07:46 +0200
Subject: [PATCH 2/7] fix getSnapshotBeforeUpdate
---
src/components/page-react-timings/App.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/components/page-react-timings/App.tsx b/src/components/page-react-timings/App.tsx
index 42c1e8a..59add50 100644
--- a/src/components/page-react-timings/App.tsx
+++ b/src/components/page-react-timings/App.tsx
@@ -133,6 +133,7 @@ class ClassWithMetrics extends React.Component<{
override getSnapshotBeforeUpdate() {
this.boundLog("getSnapshotBeforeUpdate");
+ return "";
}
override componentWillUnmount() {
--
2.51.2
From ae02ffdffdba3616ce9bf6751b16a66f5f8affa0 Mon Sep 17 00:00:00 2001
From: Ayc0
Date: Tue, 21 May 2024 16:22:18 +0200
Subject: [PATCH 3/7] add re-renders
---
src/components/page-react-timings/App.tsx | 29 ++++++++++++++++-------
1 file changed, 21 insertions(+), 8 deletions(-)
diff --git a/src/components/page-react-timings/App.tsx b/src/components/page-react-timings/App.tsx
index 59add50..0b8a5b5 100644
--- a/src/components/page-react-timings/App.tsx
+++ b/src/components/page-react-timings/App.tsx
@@ -349,10 +349,16 @@ const examples = {
function: ExampleWithFunction,
};
+function resetConsole() {
+ console.clear();
+ i = 65;
+}
+
export default function App() {
const [example, setExample] = React.useState(
null
);
+ const [, forRerender] = React.useState({});
const Example: (() => JSX.Element) | undefined = examples[example!];
const [withTimings, setTiming] = React.useState(false);
@@ -369,8 +375,7 @@ export default function App() {