Optimize render part 2
This commit is contained in:
parent
3f1adec614
commit
d41e61a96b
3 changed files with 307 additions and 182 deletions
55
ts/components/Profiler.tsx
Normal file
55
ts/components/Profiler.tsx
Normal file
|
@ -0,0 +1,55 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { ReactNode } from 'react';
|
||||
|
||||
type InternalPropsType = Readonly<{
|
||||
id: string;
|
||||
children: ReactNode;
|
||||
|
||||
onRender(
|
||||
id: string,
|
||||
phase: 'mount' | 'update',
|
||||
actualDuration: number,
|
||||
baseDuration: number,
|
||||
startTime: number,
|
||||
commitTime: number,
|
||||
interactions: Set<unknown>
|
||||
): void;
|
||||
}>;
|
||||
|
||||
const Fallback: React.FC<InternalPropsType> = ({ children }) => {
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
const BaseProfiler: React.FC<InternalPropsType> =
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(React as any).unstable_Profiler || Fallback;
|
||||
|
||||
export type PropsType = Readonly<{
|
||||
id: string;
|
||||
children: ReactNode;
|
||||
}>;
|
||||
|
||||
const onRender: InternalPropsType['onRender'] = (
|
||||
id,
|
||||
phase,
|
||||
actual,
|
||||
base,
|
||||
start,
|
||||
commit
|
||||
) => {
|
||||
window.log.info(
|
||||
`Profiler.tsx(${id}): actual=${actual.toFixed(1)}ms phase=${phase} ` +
|
||||
`base=${base.toFixed(1)}ms start=${start.toFixed(1)}ms ` +
|
||||
`commit=${commit.toFixed(1)}ms`
|
||||
);
|
||||
};
|
||||
|
||||
export const Profiler: React.FC<PropsType> = ({ id, children }) => {
|
||||
return (
|
||||
<BaseProfiler id={id} onRender={onRender}>
|
||||
{children}
|
||||
</BaseProfiler>
|
||||
);
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue