Compare commits

...

7 Commits

Author SHA1 Message Date
Joe Savona
ae3444675f [compiler] @enablePreserveExistingMemoizationGuarantees on by default
This enables `@enablePreserveExistingMemoizationGuarantees` by default. As of the previous PR (#34503), this mode now enables the following behaviors:

- Treating variables referenced within a `useMemo()` or `useCallback()` as "frozen" (immutable) as of the start of the call. Ie, the compiler will assume that the values you reference are not mutated by the body of the useMemo, not are they mutated later. Directly modifying them (eg `var.property = true`) will be an error.
- Similarly, the results of the useMemo/useCallback are treated as frozen (immutable) after the call.

These two rules match the behavior for other hooks: this means that developers will see similar behavior to swapping out `useMemo()` for a custom `useMyMemo()` wrapper/alias.

Additionally, as of #34503 the compiler uses information from the manual dependencies to know which variables are non-nullable. Even if a useMemo block conditionally accesses a nested property — `if (cond) { log(x.y.z) }` — where the compiler would not usually know that `x` is non-nullable, if the user specifies `x.y.z` as a manual dependency then the compiler knows that `x` and `x.y` are non-nullable and can infer a more precise dependency.

Finally, this mode also ensures that we always memoize function calls that return primitives. See #34343 for more details.

For now, I've explicitly opted out of this feature in all test fixtures where the behavior changed.
2025-10-02 09:53:51 -07:00
Joseph Savona
57d5a59748 [compiler] enablePreserveMemo treats manual deps as non-nullable (#34503)
The `@enablePreserveExistingMemoizationGuarantees` mode can still fail
to preserve manual memoization due to mismtached dependencies.
Specifically, where the user's dependencies are more precise than the
compiler infers bc the compiler is being conservative about what might
be nullable. In this mode though we're intentionally using information
from the manual memoization and can also rely on the deps as a signal
for what's non-nullable.

The idea of the PR is that we treat manual memo deps just like other
inferred-as-non-nullable objects during PropagateScopeDeps. We're
careful to not treat the full path as non-nullable, only up to the last
property index. So `x.y.z` as a manual dep treats `x` and `x.y` as
non-nullable, allowing us to preserve a conditional dependency on
`x.y.z`.

Optionals within manual dependencies are a bit trickier and aren't
handled yet, but hopefully that's less common and something we can
improve in a follow-up. Not handling them just means that developers may
hit false positives on validating existing memoization if they use
optional chains in manual dependencies.

---
[//]: # (BEGIN SAPLING FOOTER)
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34503).
* #34689
* __->__ #34503
2025-10-02 09:48:52 -07:00
Sebastian "Sebbie" Silbermann
bc828bf6e3 [DevTools] Recommend React Performance tracks if supported when Timeline profiler is not supported (#34684) 2025-10-02 18:33:50 +02:00
Sebastian "Sebbie" Silbermann
a757cb7667 Fix DevTools fixture crash due to usage of renamed APIs (#34682) 2025-10-02 14:43:02 +02:00
Sebastian Markbåge
d74f061b69 [Fiber] Clean up ViewTransition when it fails to start (#34676)
The View Transition docs were unclear about this but apparently the
`finished` promise never settles if the animation never started. So if
there's an error that rejects the `ready` promise, we'll never run the
clean up which can cause it to stall.

Fixes #34662.

However, ultimately that is caused by Chrome stalling our default
`onDefaultTransitionIndicator` but it should be unblocked after 10
seconds, not a minute.
2025-10-01 21:58:13 -04:00
Eugene Choi
f7254efc5c [playground] Persist open tabs on compiler error (#34673)
This change allows it so that tabs that were open before a compiler
error are automatically opened again when the error is resolved. Quality
of life change for those especially working with the advanced view of
the playground.


https://github.com/user-attachments/assets/cd2dc117-e6fc-4f57-a08f-259757c4f5e8
2025-10-01 21:26:16 -04:00
Sebastian "Sebbie" Silbermann
79ca5ae855 Bump next prerelease version numbers (#34674) 2025-10-02 00:31:55 +02:00
143 changed files with 983 additions and 154 deletions

View File

@@ -7,18 +7,18 @@
//
// The @latest channel uses the version as-is, e.g.:
//
// 19.2.0
// 19.3.0
//
// The @canary channel appends additional information, with the scheme
// <version>-<label>-<commit_sha>, e.g.:
//
// 19.2.0-canary-a1c2d3e4
// 19.3.0-canary-a1c2d3e4
//
// The @experimental channel doesn't include a version, only a date and a sha, e.g.:
//
// 0.0.0-experimental-241c4467e-20200129
const ReactVersion = '19.2.0';
const ReactVersion = '19.3.0';
// The label used by the @canary channel. Represents the upcoming release's
// stability. Most of the time, this will be "canary", but we may temporarily
@@ -33,8 +33,8 @@ const canaryChannelLabel = 'canary';
const rcNumber = 0;
const stablePackages = {
'eslint-plugin-react-hooks': '6.1.0',
'jest-react': '0.17.0',
'eslint-plugin-react-hooks': '6.2.0',
'jest-react': '0.18.0',
react: ReactVersion,
'react-art': ReactVersion,
'react-dom': ReactVersion,
@@ -42,12 +42,12 @@ const stablePackages = {
'react-server-dom-turbopack': ReactVersion,
'react-server-dom-parcel': ReactVersion,
'react-is': ReactVersion,
'react-reconciler': '0.33.0',
'react-refresh': '0.18.0',
'react-reconciler': '0.34.0',
'react-refresh': '0.19.0',
'react-test-renderer': ReactVersion,
'use-subscription': '1.12.0',
'use-sync-external-store': '1.6.0',
scheduler: '0.27.0',
'use-subscription': '1.13.0',
'use-sync-external-store': '1.7.0',
scheduler: '0.28.0',
};
// These packages do not exist in the @canary or @latest channel, only

View File

@@ -23,6 +23,7 @@ export default function AccordionWindow(props: {
tabsOpen: Set<string>;
setTabsOpen: (newTab: Set<string>) => void;
changedPasses: Set<string>;
isFailure: boolean;
}): React.ReactElement {
return (
<div className="flex-1 min-w-[550px] sm:min-w-0">
@@ -36,6 +37,7 @@ export default function AccordionWindow(props: {
tabsOpen={props.tabsOpen}
setTabsOpen={props.setTabsOpen}
hasChanged={props.changedPasses.has(name)}
isFailure={props.isFailure}
/>
);
})}
@@ -50,15 +52,17 @@ function AccordionWindowItem({
tabsOpen,
setTabsOpen,
hasChanged,
isFailure,
}: {
name: string;
tabs: TabsRecord;
tabsOpen: Set<string>;
setTabsOpen: (newTab: Set<string>) => void;
hasChanged: boolean;
isFailure: boolean;
}): React.ReactElement {
const id = useId();
const isShow = tabsOpen.has(name);
const isShow = isFailure ? name === 'Output' : tabsOpen.has(name);
const transitionName = `accordion-window-item-${id}`;

View File

@@ -265,14 +265,8 @@ function OutputContent({store, compilerOutput}: Props): JSX.Element {
* Update the active tab back to the output or errors tab when the compilation state
* changes between success/failure.
*/
const [previousOutputKind, setPreviousOutputKind] = useState(
compilerOutput.kind,
);
if (compilerOutput.kind !== previousOutputKind) {
setPreviousOutputKind(compilerOutput.kind);
setTabsOpen(new Set(['Output']));
setActiveTab('Output');
}
const isFailure = compilerOutput.kind !== 'ok';
const changedPasses: Set<string> = new Set(['Output', 'HIR']); // Initial and final passes should always be bold
let lastResult: string = '';
for (const [passName, results] of compilerOutput.results) {
@@ -301,6 +295,8 @@ function OutputContent({store, compilerOutput}: Props): JSX.Element {
tabs={tabs}
activeTab={activeTab}
onTabChange={setActiveTab}
// Display the Output tab on compilation failure
activeTabOverride={isFailure ? 'Output' : undefined}
/>
</ViewTransition>
);
@@ -319,6 +315,7 @@ function OutputContent({store, compilerOutput}: Props): JSX.Element {
tabsOpen={tabsOpen}
tabs={tabs}
changedPasses={changedPasses}
isFailure={isFailure}
/>
</ViewTransition>
);

View File

@@ -17,11 +17,15 @@ export default function TabbedWindow({
tabs,
activeTab,
onTabChange,
activeTabOverride,
}: {
tabs: Map<string, React.ReactNode>;
activeTab: string;
onTabChange: (tab: string) => void;
activeTabOverride?: string;
}): React.ReactElement {
const currentActiveTab = activeTabOverride ? activeTabOverride : activeTab;
const id = useId();
const transitionName = `tab-highlight-${id}`;
@@ -37,7 +41,7 @@ export default function TabbedWindow({
<div className="flex flex-col h-full max-w-full">
<div className="flex p-2 flex-shrink-0">
{Array.from(tabs.keys()).map(tab => {
const isActive = activeTab === tab;
const isActive = currentActiveTab === tab;
return (
<button
key={tab}
@@ -49,6 +53,8 @@ export default function TabbedWindow({
{isActive && (
<ViewTransition
name={transitionName}
enter={{default: 'none'}}
exit={{default: 'none'}}
share={{
[TOGGLE_TAB_TRANSITION]: 'tab-highlight',
default: 'none',
@@ -58,6 +64,8 @@ export default function TabbedWindow({
</ViewTransition>
)}
<ViewTransition
enter={{default: 'none'}}
exit={{default: 'none'}}
update={{
[TOGGLE_TAB_TRANSITION]: 'tab-text',
default: 'none',
@@ -69,7 +77,7 @@ export default function TabbedWindow({
})}
</div>
<div className="flex-1 overflow-hidden w-full h-full">
{tabs.get(activeTab)}
{tabs.get(currentActiveTab)}
</div>
</div>
</div>

View File

@@ -454,6 +454,32 @@ function collectNonNullsInBlocks(
assumedNonNullObjects.add(entry);
}
}
} else if (
fn.env.config.enablePreserveExistingMemoizationGuarantees &&
instr.value.kind === 'StartMemoize' &&
instr.value.deps != null
) {
for (const dep of instr.value.deps) {
if (dep.root.kind === 'NamedLocal') {
if (
!isImmutableAtInstr(dep.root.value.identifier, instr.id, context)
) {
continue;
}
for (let i = 0; i < dep.path.length; i++) {
const pathEntry = dep.path[i]!;
if (pathEntry.optional) {
break;
}
const depNode = context.registry.getOrCreateProperty({
identifier: dep.root.value.identifier,
path: dep.path.slice(0, i),
reactive: dep.root.value.reactive,
});
assumedNonNullObjects.add(depNode);
}
}
}
}
}

View File

@@ -210,7 +210,7 @@ export const EnvironmentConfigSchema = z.object({
* that if a useEffect or useCallback references a function value, that function value will be
* considered frozen, and in turn all of its referenced variables will be considered frozen as well.
*/
enablePreserveExistingMemoizationGuarantees: z.boolean().default(false),
enablePreserveExistingMemoizationGuarantees: z.boolean().default(true),
/**
* Validates that all useMemo/useCallback values are also memoized by Forget. This mode can be

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
// bar(props.b) is an allocating expression that produces a primitive, which means
// that Forget should memoize it.
// Correctness:
@@ -16,7 +17,8 @@ function AllocatingPrimitiveAsDep(props) {
## Code
```javascript
import { c as _c } from "react/compiler-runtime"; // bar(props.b) is an allocating expression that produces a primitive, which means
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
// bar(props.b) is an allocating expression that produces a primitive, which means
// that Forget should memoize it.
// Correctness:
// - y depends on either bar(props.b) or bar(props.b) + 1

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
// bar(props.b) is an allocating expression that produces a primitive, which means
// that Forget should memoize it.
// Correctness:

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
const someGlobal = {value: 0};
@@ -32,7 +33,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
import { useMemo } from "react";
const someGlobal = { value: 0 };

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
const someGlobal = {value: 0};

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
function Component(props) {
let a = foo();
// freeze `a` so we know the next line cannot mutate it
@@ -17,7 +18,7 @@ function Component(props) {
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
function Component(props) {
const $ = _c(2);
const a = foo();

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
function Component(props) {
let a = foo();
// freeze `a` so we know the next line cannot mutate it

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
import {Stringify, identity} from 'shared-runtime';
function foo() {
@@ -64,7 +65,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
import { Stringify, identity } from "shared-runtime";
function foo() {

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
import {Stringify, identity} from 'shared-runtime';
function foo() {

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {Stringify} from 'shared-runtime';
@@ -25,7 +26,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
import { useMemo } from "react";
import { Stringify } from "shared-runtime";

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {Stringify} from 'shared-runtime';

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
function foo(props) {
let x, y;
({x, y} = {x: props.a, y: props.b});
@@ -21,6 +22,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
function foo(props) {
let x;
let y;

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
function foo(props) {
let x, y;
({x, y} = {x: props.a, y: props.b});

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @flow @enableNewMutationAliasingModel
// @flow @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
/**
* This hook returns a function that when called with an input object,
* will return the result of mapping that input with the supplied map

View File

@@ -1,4 +1,4 @@
// @flow @enableNewMutationAliasingModel
// @flow @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
/**
* This hook returns a function that when called with an input object,
* will return the result of mapping that input with the supplied map

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
/**
* Repro from https://github.com/facebook/react/issues/34262

View File

@@ -1,4 +1,4 @@
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
/**
* Repro from https://github.com/facebook/react/issues/34262

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {identity, Stringify, useHook} from 'shared-runtime';

View File

@@ -1,4 +1,4 @@
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {identity, Stringify, useHook} from 'shared-runtime';

View File

@@ -0,0 +1,91 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
import {useMemo} from 'react';
import {identity, ValidateMemoization} from 'shared-runtime';
function Component({x}) {
const object = useMemo(() => {
return identity({
callback: () => {
// This is a bug in our dependency inference: we stop capturing dependencies
// after x.a.b?.c. But what this dependency is telling us is that if `x.a.b`
// was non-nullish, then we can access `.c.d?.e`. Thus we should take the
// full property chain, exactly as-is with optionals/non-optionals, as a
// dependency
return identity(x.a.b?.c.d?.e);
},
});
}, [x.a.b?.c.d?.e]);
const result = useMemo(() => {
return [object.callback()];
}, [object]);
return <Inner x={x} result={result} />;
}
function Inner({x, result}) {
'use no memo';
return <ValidateMemoization inputs={[x.y.z]} output={result} />;
}
export const FIXTURE_ENTRYPOINT = {
fn: Component,
params: [{x: {y: {z: 42}}}],
sequentialRenders: [
{x: {y: {z: 42}}},
{x: {y: {z: 42}}},
{x: {y: {z: 3.14}}},
{x: {y: {z: 42}}},
{x: {y: {z: 3.14}}},
{x: {y: {z: 42}}},
],
};
```
## Error
```
Found 1 error:
Compilation Skipped: Existing memoization could not be preserved
React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `x.a.b?.c`, but the source dependencies were [x.a.b?.c.d?.e]. Inferred less specific property than source.
error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.ts:7:25
5 |
6 | function Component({x}) {
> 7 | const object = useMemo(() => {
| ^^^^^^^
> 8 | return identity({
| ^^^^^^^^^^^^^^^^^^^^^
> 9 | callback: () => {
| ^^^^^^^^^^^^^^^^^^^^^
> 10 | // This is a bug in our dependency inference: we stop capturing dependencies
| ^^^^^^^^^^^^^^^^^^^^^
> 11 | // after x.a.b?.c. But what this dependency is telling us is that if `x.a.b`
| ^^^^^^^^^^^^^^^^^^^^^
> 12 | // was non-nullish, then we can access `.c.d?.e`. Thus we should take the
| ^^^^^^^^^^^^^^^^^^^^^
> 13 | // full property chain, exactly as-is with optionals/non-optionals, as a
| ^^^^^^^^^^^^^^^^^^^^^
> 14 | // dependency
| ^^^^^^^^^^^^^^^^^^^^^
> 15 | return identity(x.a.b?.c.d?.e);
| ^^^^^^^^^^^^^^^^^^^^^
> 16 | },
| ^^^^^^^^^^^^^^^^^^^^^
> 17 | });
| ^^^^^^^^^^^^^^^^^^^^^
> 18 | }, [x.a.b?.c.d?.e]);
| ^^^^ Could not preserve existing manual memoization
19 | const result = useMemo(() => {
20 | return [object.callback()];
21 | }, [object]);
```

View File

@@ -0,0 +1,41 @@
// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
import {useMemo} from 'react';
import {identity, ValidateMemoization} from 'shared-runtime';
function Component({x}) {
const object = useMemo(() => {
return identity({
callback: () => {
// This is a bug in our dependency inference: we stop capturing dependencies
// after x.a.b?.c. But what this dependency is telling us is that if `x.a.b`
// was non-nullish, then we can access `.c.d?.e`. Thus we should take the
// full property chain, exactly as-is with optionals/non-optionals, as a
// dependency
return identity(x.a.b?.c.d?.e);
},
});
}, [x.a.b?.c.d?.e]);
const result = useMemo(() => {
return [object.callback()];
}, [object]);
return <Inner x={x} result={result} />;
}
function Inner({x, result}) {
'use no memo';
return <ValidateMemoization inputs={[x.y.z]} output={result} />;
}
export const FIXTURE_ENTRYPOINT = {
fn: Component,
params: [{x: {y: {z: 42}}}],
sequentialRenders: [
{x: {y: {z: 42}}},
{x: {y: {z: 42}}},
{x: {y: {z: 3.14}}},
{x: {y: {z: 42}}},
{x: {y: {z: 3.14}}},
{x: {y: {z: 42}}},
],
};

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @flow @validatePreserveExistingMemoizationGuarantees
// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {logValue, useFragment, useHook, typedLog} from 'shared-runtime';

View File

@@ -1,4 +1,4 @@
// @flow @validatePreserveExistingMemoizationGuarantees
// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {logValue, useFragment, useHook, typedLog} from 'shared-runtime';

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @flow @validatePreserveExistingMemoizationGuarantees
// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useFragment} from 'react-relay';
import LogEvent from 'LogEvent';
import {useCallback, useMemo} from 'react';

View File

@@ -1,4 +1,4 @@
// @flow @validatePreserveExistingMemoizationGuarantees
// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useFragment} from 'react-relay';
import LogEvent from 'LogEvent';
import {useCallback, useMemo} from 'react';

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {ValidateMemoization, useHook} from 'shared-runtime';

View File

@@ -1,4 +1,4 @@
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {ValidateMemoization, useHook} from 'shared-runtime';

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {makeObject_Primitives, Stringify} from 'shared-runtime';
function Component(props) {

View File

@@ -1,4 +1,4 @@
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {makeObject_Primitives, Stringify} from 'shared-runtime';
function Component(props) {

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {makeObject_Primitives, Stringify} from 'shared-runtime';
function Component(props) {

View File

@@ -1,4 +1,4 @@
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {makeObject_Primitives, Stringify} from 'shared-runtime';
function Component(props) {

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo, useState} from 'react';
import {ValidateMemoization} from 'shared-runtime';
@@ -28,7 +29,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c2 } from "react/compiler-runtime";
import { c as _c2 } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
import { useMemo, useState } from "react";
import { ValidateMemoization } from "shared-runtime";

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo, useState} from 'react';
import {ValidateMemoization} from 'shared-runtime';

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
import fbt from 'fbt';
/**
@@ -35,7 +36,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
import fbt from "fbt";
/**

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
import fbt from 'fbt';
/**

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
const {identity, mutate} = require('shared-runtime');
function Component(props) {
@@ -24,6 +25,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
const { identity, mutate } = require("shared-runtime");
function Component(props) {

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
const {identity, mutate} = require('shared-runtime');
function Component(props) {

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @hookPattern:".*\b(use[^$]+)$"
// @hookPattern:".*\b(use[^$]+)$" @enablePreserveExistingMemoizationGuarantees:false
import * as React from 'react';
import {makeArray, useHook} from 'shared-runtime';
@@ -36,7 +36,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime"; // @hookPattern:".*\b(use[^$]+)$"
import { c as _c } from "react/compiler-runtime"; // @hookPattern:".*\b(use[^$]+)$" @enablePreserveExistingMemoizationGuarantees:false
import * as React from "react";
import { makeArray, useHook } from "shared-runtime";

View File

@@ -1,4 +1,4 @@
// @hookPattern:".*\b(use[^$]+)$"
// @hookPattern:".*\b(use[^$]+)$" @enablePreserveExistingMemoizationGuarantees:false
import * as React from 'react';
import {makeArray, useHook} from 'shared-runtime';

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @debug
// @debug @enablePreserveExistingMemoizationGuarantees:false
function Component(props) {
const x = makeObject();
const y = delete x[props.value];
@@ -14,7 +14,7 @@ function Component(props) {
## Code
```javascript
// @debug
// @debug @enablePreserveExistingMemoizationGuarantees:false
function Component(props) {
const x = makeObject();
const y = delete x[props.value];

View File

@@ -1,4 +1,4 @@
// @debug
// @debug @enablePreserveExistingMemoizationGuarantees:false
function Component(props) {
const x = makeObject();
const y = delete x[props.value];

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
function Component(props) {
const x = makeObject();
const y = delete x.value;
@@ -13,6 +14,7 @@ function Component(props) {
## Code
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
function Component(props) {
const x = makeObject();
const y = delete x.value;

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
function Component(props) {
const x = makeObject();
const y = delete x.value;

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees @enableNewMutationAliasingModel
// @validatePreserveExistingMemoizationGuarantees @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
import {makeArray} from 'shared-runtime';

View File

@@ -1,4 +1,4 @@
// @validatePreserveExistingMemoizationGuarantees @enableNewMutationAliasingModel
// @validatePreserveExistingMemoizationGuarantees @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
import {makeArray} from 'shared-runtime';

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {identity, ValidateMemoization} from 'shared-runtime';
@@ -32,7 +33,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
import { useMemo } from "react";
import { identity, ValidateMemoization } from "shared-runtime";

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {identity, ValidateMemoization} from 'shared-runtime';

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {identity, ValidateMemoization} from 'shared-runtime';
@@ -29,7 +30,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
import { useMemo } from "react";
import { identity, ValidateMemoization } from "shared-runtime";

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {identity, ValidateMemoization} from 'shared-runtime';

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {
mutate,
@@ -49,7 +50,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
import { useMemo } from "react";
import {
mutate,

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {
mutate,

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {
typedCapture,
@@ -41,7 +42,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
import { useMemo } from "react";
import {
typedCapture,

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {
typedCapture,

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {
typedCapture,
@@ -42,7 +43,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
import { useMemo } from "react";
import {
typedCapture,

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {
typedCapture,

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {
typedCapture,
@@ -40,7 +41,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
import { useMemo } from "react";
import {
typedCapture,

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {
typedCapture,

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {
typedCapture,
@@ -36,7 +37,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
import { useMemo } from "react";
import {
typedCapture,

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {
typedCapture,

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {
typedCapture,
@@ -40,7 +41,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
import { useMemo } from "react";
import {
typedCapture,

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {
typedCapture,

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @enableNewMutationAliasingModel
// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
import {Stringify} from 'shared-runtime';
@@ -36,7 +36,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
import { useCallback } from "react";
import { Stringify } from "shared-runtime";

View File

@@ -1,4 +1,4 @@
// @enableNewMutationAliasingModel
// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
import {Stringify} from 'shared-runtime';

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @enableNewMutationAliasingModel
// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
import {Stringify} from 'shared-runtime';
@@ -31,7 +31,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
import { useCallback } from "react";
import { Stringify } from "shared-runtime";

View File

@@ -1,4 +1,4 @@
// @enableNewMutationAliasingModel
// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
import {Stringify} from 'shared-runtime';

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @enableNewMutationAliasingModel
// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
function useFoo(arr1, arr2) {
@@ -27,7 +27,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
import { useMemo } from "react";
function useFoo(arr1, arr2) {

View File

@@ -1,4 +1,4 @@
// @enableNewMutationAliasingModel
// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
function useFoo(arr1, arr2) {

View File

@@ -0,0 +1,122 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
import {useMemo} from 'react';
import {identity, ValidateMemoization} from 'shared-runtime';
function Component({x}) {
const object = useMemo(() => {
return identity({
callback: () => {
return identity(x.y.z); // accesses more levels of properties than the manual memo
},
});
// x.y as a manual dep only tells us that x is non-nullable, not that x.y is non-nullable
// we can only take a dep on x.y, not x.y.z
}, [x.y]);
const result = useMemo(() => {
return [object.callback()];
}, [object]);
return <ValidateMemoization inputs={[x.y]} output={result} />;
}
const input1 = {x: {y: {z: 42}}};
const input1b = {x: {y: {z: 42}}};
const input2 = {x: {y: {z: 3.14}}};
export const FIXTURE_ENTRYPOINT = {
fn: Component,
params: [input1],
sequentialRenders: [
input1,
input1,
input1b, // should reset even though .z didn't change
input1,
input2,
],
};
```
## Code
```javascript
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
import { useMemo } from "react";
import { identity, ValidateMemoization } from "shared-runtime";
function Component(t0) {
const $ = _c(11);
const { x } = t0;
let t1;
if ($[0] !== x.y) {
t1 = identity({ callback: () => identity(x.y.z) });
$[0] = x.y;
$[1] = t1;
} else {
t1 = $[1];
}
const object = t1;
let t2;
if ($[2] !== object) {
t2 = object.callback();
$[2] = object;
$[3] = t2;
} else {
t2 = $[3];
}
let t3;
if ($[4] !== t2) {
t3 = [t2];
$[4] = t2;
$[5] = t3;
} else {
t3 = $[5];
}
const result = t3;
let t4;
if ($[6] !== x.y) {
t4 = [x.y];
$[6] = x.y;
$[7] = t4;
} else {
t4 = $[7];
}
let t5;
if ($[8] !== result || $[9] !== t4) {
t5 = <ValidateMemoization inputs={t4} output={result} />;
$[8] = result;
$[9] = t4;
$[10] = t5;
} else {
t5 = $[10];
}
return t5;
}
const input1 = { x: { y: { z: 42 } } };
const input1b = { x: { y: { z: 42 } } };
const input2 = { x: { y: { z: 3.14 } } };
export const FIXTURE_ENTRYPOINT = {
fn: Component,
params: [input1],
sequentialRenders: [
input1,
input1,
input1b, // should reset even though .z didn't change
input1,
input2,
],
};
```
### Eval output
(kind: ok) <div>{"inputs":[{"z":42}],"output":[42]}</div>
<div>{"inputs":[{"z":42}],"output":[42]}</div>
<div>{"inputs":[{"z":42}],"output":[42]}</div>
<div>{"inputs":[{"z":42}],"output":[42]}</div>
<div>{"inputs":[{"z":3.14}],"output":[3.14]}</div>

View File

@@ -0,0 +1,35 @@
// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
import {useMemo} from 'react';
import {identity, ValidateMemoization} from 'shared-runtime';
function Component({x}) {
const object = useMemo(() => {
return identity({
callback: () => {
return identity(x.y.z); // accesses more levels of properties than the manual memo
},
});
// x.y as a manual dep only tells us that x is non-nullable, not that x.y is non-nullable
// we can only take a dep on x.y, not x.y.z
}, [x.y]);
const result = useMemo(() => {
return [object.callback()];
}, [object]);
return <ValidateMemoization inputs={[x.y]} output={result} />;
}
const input1 = {x: {y: {z: 42}}};
const input1b = {x: {y: {z: 42}}};
const input2 = {x: {y: {z: 3.14}}};
export const FIXTURE_ENTRYPOINT = {
fn: Component,
params: [input1],
sequentialRenders: [
input1,
input1,
input1b, // should reset even though .z didn't change
input1,
input2,
],
};

View File

@@ -0,0 +1,117 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
import {useMemo} from 'react';
import {identity, ValidateMemoization} from 'shared-runtime';
function Component({x}) {
const object = useMemo(() => {
return identity({
callback: () => {
return identity(x.y.z);
},
});
}, [x.y.z]);
const result = useMemo(() => {
return [object.callback()];
}, [object]);
return <ValidateMemoization inputs={[x.y.z]} output={result} />;
}
export const FIXTURE_ENTRYPOINT = {
fn: Component,
params: [{x: {y: {z: 42}}}],
sequentialRenders: [
{x: {y: {z: 42}}},
{x: {y: {z: 42}}},
{x: {y: {z: 3.14}}},
{x: {y: {z: 42}}},
{x: {y: {z: 3.14}}},
{x: {y: {z: 42}}},
],
};
```
## Code
```javascript
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
import { useMemo } from "react";
import { identity, ValidateMemoization } from "shared-runtime";
function Component(t0) {
const $ = _c(11);
const { x } = t0;
let t1;
if ($[0] !== x.y.z) {
t1 = identity({ callback: () => identity(x.y.z) });
$[0] = x.y.z;
$[1] = t1;
} else {
t1 = $[1];
}
const object = t1;
let t2;
if ($[2] !== object) {
t2 = object.callback();
$[2] = object;
$[3] = t2;
} else {
t2 = $[3];
}
let t3;
if ($[4] !== t2) {
t3 = [t2];
$[4] = t2;
$[5] = t3;
} else {
t3 = $[5];
}
const result = t3;
let t4;
if ($[6] !== x.y.z) {
t4 = [x.y.z];
$[6] = x.y.z;
$[7] = t4;
} else {
t4 = $[7];
}
let t5;
if ($[8] !== result || $[9] !== t4) {
t5 = <ValidateMemoization inputs={t4} output={result} />;
$[8] = result;
$[9] = t4;
$[10] = t5;
} else {
t5 = $[10];
}
return t5;
}
export const FIXTURE_ENTRYPOINT = {
fn: Component,
params: [{ x: { y: { z: 42 } } }],
sequentialRenders: [
{ x: { y: { z: 42 } } },
{ x: { y: { z: 42 } } },
{ x: { y: { z: 3.14 } } },
{ x: { y: { z: 42 } } },
{ x: { y: { z: 3.14 } } },
{ x: { y: { z: 42 } } },
],
};
```
### Eval output
(kind: ok) <div>{"inputs":[42],"output":[42]}</div>
<div>{"inputs":[42],"output":[42]}</div>
<div>{"inputs":[3.14],"output":[3.14]}</div>
<div>{"inputs":[42],"output":[42]}</div>
<div>{"inputs":[3.14],"output":[3.14]}</div>
<div>{"inputs":[42],"output":[42]}</div>

View File

@@ -0,0 +1,31 @@
// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
import {useMemo} from 'react';
import {identity, ValidateMemoization} from 'shared-runtime';
function Component({x}) {
const object = useMemo(() => {
return identity({
callback: () => {
return identity(x.y.z);
},
});
}, [x.y.z]);
const result = useMemo(() => {
return [object.callback()];
}, [object]);
return <ValidateMemoization inputs={[x.y.z]} output={result} />;
}
export const FIXTURE_ENTRYPOINT = {
fn: Component,
params: [{x: {y: {z: 42}}}],
sequentialRenders: [
{x: {y: {z: 42}}},
{x: {y: {z: 42}}},
{x: {y: {z: 3.14}}},
{x: {y: {z: 42}}},
{x: {y: {z: 3.14}}},
{x: {y: {z: 42}}},
],
};

View File

@@ -0,0 +1,125 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
import {useMemo} from 'react';
import {identity, ValidateMemoization} from 'shared-runtime';
function Component({x, y, z}) {
const object = useMemo(() => {
return identity({
callback: () => {
return identity(x?.y?.z, y.a?.b, z.a.b?.c);
},
});
}, [x?.y?.z, y.a?.b, z.a.b?.c]);
const result = useMemo(() => {
return [object.callback()];
}, [object]);
return <Inner x={x} result={result} />;
}
function Inner({x, result}) {
'use no memo';
return <ValidateMemoization inputs={[x.y.z]} output={result} />;
}
export const FIXTURE_ENTRYPOINT = {
fn: Component,
params: [{x: {y: {z: 42}}}],
sequentialRenders: [
{x: {y: {z: 42}}},
{x: {y: {z: 42}}},
{x: {y: {z: 3.14}}},
{x: {y: {z: 42}}},
{x: {y: {z: 3.14}}},
{x: {y: {z: 42}}},
],
};
```
## Code
```javascript
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
import { useMemo } from "react";
import { identity, ValidateMemoization } from "shared-runtime";
function Component(t0) {
const $ = _c(11);
const { x, y, z } = t0;
x?.y?.z;
y.a?.b;
z.a.b?.c;
let t1;
if ($[0] !== x?.y?.z || $[1] !== y.a?.b || $[2] !== z.a.b?.c) {
t1 = identity({ callback: () => identity(x?.y?.z, y.a?.b, z.a.b?.c) });
$[0] = x?.y?.z;
$[1] = y.a?.b;
$[2] = z.a.b?.c;
$[3] = t1;
} else {
t1 = $[3];
}
const object = t1;
let t2;
if ($[4] !== object) {
t2 = object.callback();
$[4] = object;
$[5] = t2;
} else {
t2 = $[5];
}
let t3;
if ($[6] !== t2) {
t3 = [t2];
$[6] = t2;
$[7] = t3;
} else {
t3 = $[7];
}
const result = t3;
let t4;
if ($[8] !== result || $[9] !== x) {
t4 = <Inner x={x} result={result} />;
$[8] = result;
$[9] = x;
$[10] = t4;
} else {
t4 = $[10];
}
return t4;
}
function Inner({ x, result }) {
"use no memo";
return <ValidateMemoization inputs={[x.y.z]} output={result} />;
}
export const FIXTURE_ENTRYPOINT = {
fn: Component,
params: [{ x: { y: { z: 42 } } }],
sequentialRenders: [
{ x: { y: { z: 42 } } },
{ x: { y: { z: 42 } } },
{ x: { y: { z: 3.14 } } },
{ x: { y: { z: 42 } } },
{ x: { y: { z: 3.14 } } },
{ x: { y: { z: 42 } } },
],
};
```
### Eval output
(kind: ok) [[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]]
[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]]
[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]]
[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]]
[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]]
[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]]

View File

@@ -0,0 +1,36 @@
// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
import {useMemo} from 'react';
import {identity, ValidateMemoization} from 'shared-runtime';
function Component({x, y, z}) {
const object = useMemo(() => {
return identity({
callback: () => {
return identity(x?.y?.z, y.a?.b, z.a.b?.c);
},
});
}, [x?.y?.z, y.a?.b, z.a.b?.c]);
const result = useMemo(() => {
return [object.callback()];
}, [object]);
return <Inner x={x} result={result} />;
}
function Inner({x, result}) {
'use no memo';
return <ValidateMemoization inputs={[x.y.z]} output={result} />;
}
export const FIXTURE_ENTRYPOINT = {
fn: Component,
params: [{x: {y: {z: 42}}}],
sequentialRenders: [
{x: {y: {z: 42}}},
{x: {y: {z: 42}}},
{x: {y: {z: 3.14}}},
{x: {y: {z: 42}}},
{x: {y: {z: 3.14}}},
{x: {y: {z: 42}}},
],
};

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {identity} from 'shared-runtime';

View File

@@ -1,4 +1,4 @@
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {identity} from 'shared-runtime';

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
function Component({propA, propB}) {

View File

@@ -1,4 +1,4 @@
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
function Component({propA, propB}) {

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
import {identity, mutate} from 'shared-runtime';

View File

@@ -1,4 +1,4 @@
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
import {identity, mutate} from 'shared-runtime';

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
import {makeArray} from 'shared-runtime';

View File

@@ -1,4 +1,4 @@
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
import {makeArray} from 'shared-runtime';

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
function Component({propA, propB}) {

View File

@@ -1,4 +1,4 @@
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
function Component({propA, propB}) {

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
import {mutate} from 'shared-runtime';

View File

@@ -1,4 +1,4 @@
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
import {mutate} from 'shared-runtime';

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {mutate} from 'shared-runtime';

View File

@@ -1,4 +1,4 @@
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {mutate} from 'shared-runtime';

View File

@@ -2,7 +2,7 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {identity, mutate} from 'shared-runtime';

View File

@@ -1,4 +1,4 @@
// @validatePreserveExistingMemoizationGuarantees
// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
import {identity, mutate} from 'shared-runtime';

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
import {Stringify} from 'shared-runtime';
@@ -35,7 +36,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
import { useCallback } from "react";
import { Stringify } from "shared-runtime";

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
import {Stringify} from 'shared-runtime';

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
import {Stringify} from 'shared-runtime';
@@ -30,7 +31,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
import { useCallback } from "react";
import { Stringify } from "shared-runtime";

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
import {useCallback} from 'react';
import {Stringify} from 'shared-runtime';

View File

@@ -2,6 +2,7 @@
## Input
```javascript
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
function useFoo(arr1, arr2) {
@@ -26,7 +27,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
import { useMemo } from "react";
function useFoo(arr1, arr2) {

View File

@@ -1,3 +1,4 @@
// @enablePreserveExistingMemoizationGuarantees:false
import {useMemo} from 'react';
function useFoo(arr1, arr2) {

Some files were not shown because too many files have changed in this diff Show More