mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Minimal repros of product patterns
This commit is contained in:
+41
@@ -0,0 +1,41 @@
|
||||
|
||||
## Input
|
||||
|
||||
```javascript
|
||||
function Component(props) {
|
||||
const env = useRelayEnvironment();
|
||||
// Note: this is a class has no mutable methods, ie it always treats `this` as readonly
|
||||
const mutator = new Mutator(env);
|
||||
|
||||
useOtherHook();
|
||||
|
||||
// `x` should be independently memoizeable, since foo(x, mutator) cannot mutate
|
||||
// the mutator.
|
||||
const x = {};
|
||||
foo(x, mutator);
|
||||
return x;
|
||||
}
|
||||
|
||||
class Mutator {}
|
||||
|
||||
```
|
||||
|
||||
## Code
|
||||
|
||||
```javascript
|
||||
function Component(props) {
|
||||
const env = useRelayEnvironment();
|
||||
|
||||
const mutator = new Mutator(env);
|
||||
|
||||
useOtherHook();
|
||||
|
||||
const x = {};
|
||||
foo(x, mutator);
|
||||
return x;
|
||||
}
|
||||
|
||||
class Mutator {}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
function Component(props) {
|
||||
const env = useRelayEnvironment();
|
||||
// Note: this is a class has no mutable methods, ie it always treats `this` as readonly
|
||||
const mutator = new Mutator(env);
|
||||
|
||||
useOtherHook();
|
||||
|
||||
// `x` should be independently memoizeable, since foo(x, mutator) cannot mutate
|
||||
// the mutator.
|
||||
const x = {};
|
||||
foo(x, mutator);
|
||||
return x;
|
||||
}
|
||||
|
||||
class Mutator {}
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
|
||||
## Input
|
||||
|
||||
```javascript
|
||||
function Component(props) {
|
||||
const [value, setValue] = useState(null);
|
||||
// NOTE: this lambda does not capture any mutable values (only the state setter)
|
||||
// and thus should be treated as readonly
|
||||
const onChange = (e) => setX((value) => value + e.target.value);
|
||||
|
||||
useOtherHook();
|
||||
|
||||
// x should be independently memoizeable, since foo(x, onChange) cannot modify onChange
|
||||
const x = {};
|
||||
foo(x, onChange);
|
||||
return x;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## Code
|
||||
|
||||
```javascript
|
||||
function Component(props) {
|
||||
useState(null);
|
||||
|
||||
const onChange = (e) => setX((value) => value + e.target.value);
|
||||
|
||||
useOtherHook();
|
||||
|
||||
const x = {};
|
||||
foo(x, onChange);
|
||||
return x;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
function Component(props) {
|
||||
const [value, setValue] = useState(null);
|
||||
// NOTE: this lambda does not capture any mutable values (only the state setter)
|
||||
// and thus should be treated as readonly
|
||||
const onChange = (e) => setX((value) => value + e.target.value);
|
||||
|
||||
useOtherHook();
|
||||
|
||||
// x should be independently memoizeable, since foo(x, onChange) cannot modify onChange
|
||||
const x = {};
|
||||
foo(x, onChange);
|
||||
return x;
|
||||
}
|
||||
Reference in New Issue
Block a user