-
Notifications
You must be signed in to change notification settings - Fork 46.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
compiler: Log metrics on pruned memo blocks/values
Adds additional information to the CompileSuccess LoggerEvent: * `prunedMemoBlocks` is the number of reactive scopes that were pruned for some reason. * `prunedMemoValues` is the number of unique _values_ produced by those scopes. Both numbers exclude blocks that are just a hook call - ie although we create and prune a scope for eg `useState()`, that's just an artifact of the sequencing of our pipeline. So what this metric is counting is cases of _other_ values that go unmemoized. See the new fixture, which takes advantage of improvements in the snap runner to optionally emit the logger events in the .expect.md file if you include the "logger" pragma in a fixture. ghstack-source-id: c2015bb5565746d07427587526b71e23685279c2 Pull Request resolved: #29810
- Loading branch information
1 parent
6fbf533
commit 4fa8fa7
Showing
8 changed files
with
240 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
94 changes: 94 additions & 0 deletions
94
...react-compiler/src/__tests__/fixtures/compiler/log-pruned-memoization.expect.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
|
|
||
| ## Input | ||
|
|
||
| ```javascript | ||
| // @logger | ||
| import { useState } from "react"; | ||
| import { identity, makeObject_Primitives, useHook } from "shared-runtime"; | ||
|
|
||
| function Component() { | ||
| // The scopes for x and x2 are interleaved, so this is one scope with two values | ||
| const x = makeObject_Primitives(); | ||
| const x2 = makeObject_Primitives(); | ||
| useState(null); | ||
| identity(x); | ||
| identity(x2); | ||
|
|
||
| // We create a scope for all call expressions, but prune those with hook calls | ||
| // in this case it's _just_ a hook call, so we don't count this as pruned | ||
| const y = useHook(); | ||
|
|
||
| const z = []; | ||
| for (let i = 0; i < 10; i++) { | ||
| // The scope for obj is pruned bc it's in a loop | ||
| const obj = makeObject_Primitives(); | ||
| z.push(obj); | ||
| } | ||
|
|
||
| // Overall we expect two pruned scopes (for x+x2, and obj), with 3 pruned scope values. | ||
| return [x, x2, y, z]; | ||
| } | ||
|
|
||
| export const FIXTURE_ENTRYPOINT = { | ||
| fn: Component, | ||
| params: [{}], | ||
| }; | ||
|
|
||
| ``` | ||
|
|
||
| ## Code | ||
|
|
||
| ```javascript | ||
| import { c as _c } from "react/compiler-runtime"; // @logger | ||
| import { useState } from "react"; | ||
| import { identity, makeObject_Primitives, useHook } from "shared-runtime"; | ||
|
|
||
| function Component() { | ||
| const $ = _c(5); | ||
|
|
||
| const x = makeObject_Primitives(); | ||
| const x2 = makeObject_Primitives(); | ||
| useState(null); | ||
| identity(x); | ||
| identity(x2); | ||
|
|
||
| const y = useHook(); | ||
| let z; | ||
| if ($[0] === Symbol.for("react.memo_cache_sentinel")) { | ||
| z = []; | ||
| for (let i = 0; i < 10; i++) { | ||
| const obj = makeObject_Primitives(); | ||
| z.push(obj); | ||
| } | ||
| $[0] = z; | ||
| } else { | ||
| z = $[0]; | ||
| } | ||
| let t0; | ||
| if ($[1] !== x || $[2] !== x2 || $[3] !== y) { | ||
| t0 = [x, x2, y, z]; | ||
| $[1] = x; | ||
| $[2] = x2; | ||
| $[3] = y; | ||
| $[4] = t0; | ||
| } else { | ||
| t0 = $[4]; | ||
| } | ||
| return t0; | ||
| } | ||
|
|
||
| export const FIXTURE_ENTRYPOINT = { | ||
| fn: Component, | ||
| params: [{}], | ||
| }; | ||
|
|
||
| ``` | ||
|
|
||
| ## Logs | ||
|
|
||
| ``` | ||
| {"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":121},"end":{"line":26,"column":1,"index":813},"filename":"log-pruned-memoization.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":2,"prunedMemoValues":3} | ||
| ``` | ||
| ### Eval output | ||
| (kind: ok) [{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},[{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true}]] |
31 changes: 31 additions & 0 deletions
31
...ges/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/log-pruned-memoization.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| // @logger | ||
| import { useState } from "react"; | ||
| import { identity, makeObject_Primitives, useHook } from "shared-runtime"; | ||
|
|
||
| function Component() { | ||
| // The scopes for x and x2 are interleaved, so this is one scope with two values | ||
| const x = makeObject_Primitives(); | ||
| const x2 = makeObject_Primitives(); | ||
| useState(null); | ||
| identity(x); | ||
| identity(x2); | ||
|
|
||
| // We create a scope for all call expressions, but prune those with hook calls | ||
| // in this case it's _just_ a hook call, so we don't count this as pruned | ||
| const y = useHook(); | ||
|
|
||
| const z = []; | ||
| for (let i = 0; i < 10; i++) { | ||
| // The scope for obj is pruned bc it's in a loop | ||
| const obj = makeObject_Primitives(); | ||
| z.push(obj); | ||
| } | ||
|
|
||
| // Overall we expect two pruned scopes (for x+x2, and obj), with 3 pruned scope values. | ||
| return [x, x2, y, z]; | ||
| } | ||
|
|
||
| export const FIXTURE_ENTRYPOINT = { | ||
| fn: Component, | ||
| params: [{}], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.