42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
|
|
|
|
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}}},
|
|
],
|
|
};
|