diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 6acd8b10..19fdfae2 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -5,6 +5,7 @@ ```bash git clone https://github.com/aidenybai/react-scan.git cd react-scan +corepack enable pnpm install ``` diff --git a/.vscode/settings.json b/.vscode/settings.json index 5ff26bff..2c8e03a5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -16,5 +16,8 @@ "editor.colorDecorators": true, "[css]": { "editor.formatOnSave": false + }, + "[typescript]": { + "editor.defaultFormatter": "biomejs.biome" } } diff --git a/packages/scan/src/core/instrumentation.ts b/packages/scan/src/core/instrumentation.ts index 584b69da..9277163c 100644 --- a/packages/scan/src/core/instrumentation.ts +++ b/packages/scan/src/core/instrumentation.ts @@ -86,12 +86,21 @@ export interface Change { export type Category = 'commit' | 'unstable' | 'unnecessary'; export interface Render { - phase: string; + // TODO: use type exported from bippy instead. + phase: 'mount' | 'update' | 'unmount'; componentName: string | null; time: number | null; count: number; + /** + * Whether the re-render occurred on a component wrapped with `React.memo()`. + */ forget: boolean; changes: Array | null; + /** + * Determine if the render is unnecessary. + * Only sampling 5% of the renders to avoid performance impact. + * Otherwise, it will be `null`. + */ unnecessary: boolean | null; didCommit: boolean; fps: number; @@ -165,7 +174,6 @@ export const getPropsChanges = (fiber: Fiber) => { const prevProps = fiber.alternate?.memoizedProps || {}; const nextProps = fiber.memoizedProps || {}; - const allKeys = new Set([ ...Object.keys(prevProps), ...Object.keys(nextProps),