mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Change reference effects for hooks
I realized we hadn't updated InferReferenceEffects to match our latest thinking on hooks. Specifically, we will default to assuming that hooks can mutate their arguments and return mutable values — this works with our model since we don't treat hooks specially for reactive scope construction. Ie, first we figure out what variables construct together, then we create scopes, then we prune scopes that contain hooks. So changing the reference effects for hooks "just works". Note that it is helpful for our unit tests to have an example hook that we know _does_ freeze its input and return a frozen value, so i've temporarily added `useFreeze()` to the list of defined hooks. That is meant as a stopgap: the right solution is to allow some way to tell the compiler about specific custom hooks and their semantics.
This commit is contained in:
@@ -792,10 +792,18 @@ const HOOKS: Map<string, Hook> = new Map([
|
||||
"useRef",
|
||||
{
|
||||
kind: "Ref",
|
||||
effectKind: Effect.Read,
|
||||
effectKind: Effect.Capture,
|
||||
valueKind: ValueKind.Mutable,
|
||||
},
|
||||
],
|
||||
[
|
||||
"useFreeze",
|
||||
{
|
||||
kind: "Ref",
|
||||
effectKind: Effect.Freeze,
|
||||
valueKind: ValueKind.Frozen,
|
||||
},
|
||||
],
|
||||
]);
|
||||
|
||||
type HookKind = { kind: "State" } | { kind: "Ref" } | { kind: "Custom" };
|
||||
@@ -812,7 +820,7 @@ export function parseHookCall(place: Place): Hook | null {
|
||||
}
|
||||
return {
|
||||
kind: "Custom",
|
||||
effectKind: Effect.Freeze,
|
||||
valueKind: ValueKind.Frozen,
|
||||
effectKind: Effect.Mutate,
|
||||
valueKind: ValueKind.Mutable,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -16,16 +16,7 @@ function Foo(props) {
|
||||
|
||||
```javascript
|
||||
function Foo(props) {
|
||||
const $ = React.unstable_useMemoCache();
|
||||
const c_0 = $[0] !== props.a;
|
||||
let x;
|
||||
if (c_0) {
|
||||
x = bar(props.a);
|
||||
$[0] = props.a;
|
||||
$[1] = x;
|
||||
} else {
|
||||
x = $[1];
|
||||
}
|
||||
const x = bar(props.a);
|
||||
const y = x?.b;
|
||||
|
||||
const z = useBar(y);
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
|
||||
## Input
|
||||
|
||||
```javascript
|
||||
function Component(props) {
|
||||
const start = performance.now();
|
||||
const now = Date.now();
|
||||
const time = performance.now() - start;
|
||||
return (
|
||||
<div>
|
||||
rendering took {time} at {now}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## Code
|
||||
|
||||
```javascript
|
||||
function Component(props) {
|
||||
const $ = React.unstable_useMemoCache();
|
||||
let start;
|
||||
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
||||
start = performance.now();
|
||||
$[0] = start;
|
||||
} else {
|
||||
start = $[0];
|
||||
}
|
||||
let now;
|
||||
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
|
||||
now = Date.now();
|
||||
$[1] = now;
|
||||
} else {
|
||||
now = $[1];
|
||||
}
|
||||
let t0;
|
||||
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
|
||||
t0 = performance.now();
|
||||
$[2] = t0;
|
||||
} else {
|
||||
t0 = $[2];
|
||||
}
|
||||
const time = t0 - start;
|
||||
let t1;
|
||||
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
|
||||
t1 = (
|
||||
<div>
|
||||
rendering took {time} at {now}
|
||||
</div>
|
||||
);
|
||||
$[3] = t1;
|
||||
} else {
|
||||
t1 = $[3];
|
||||
}
|
||||
return t1;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
function Component(props) {
|
||||
const start = performance.now();
|
||||
const now = Date.now();
|
||||
const time = performance.now() - start;
|
||||
return (
|
||||
<div>
|
||||
rendering took {time} at {now}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
|
||||
## Input
|
||||
|
||||
```javascript
|
||||
function Component(props) {
|
||||
const ref = useRef(null);
|
||||
ref.current = props.value;
|
||||
return ref.current;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## Code
|
||||
|
||||
```javascript
|
||||
function Component(props) {
|
||||
const ref = useRef(null);
|
||||
ref.current = props.value;
|
||||
return ref.current;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
function Component(props) {
|
||||
const ref = useRef(null);
|
||||
ref.current = props.value;
|
||||
return ref.current;
|
||||
}
|
||||
Reference in New Issue
Block a user