Skip to content

Commit 966ac5d

Browse files
committed
[Compiler] Don't throw calculate in render when there is a global function call in the effect
Summary: Global function calls can introduce unexpected side effects, for this first iteration we are bailing out the validation when we encounter one. Local function calls remain
1 parent e9eaf4d commit 966ac5d

File tree

33 files changed

+674
-398
lines changed

33 files changed

+674
-398
lines changed

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects.ts

Lines changed: 152 additions & 323 deletions
Large diffs are not rendered by default.

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects_exp.ts

Lines changed: 420 additions & 0 deletions
Large diffs are not rendered by default.

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.expect.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
## Input
33

44
```javascript
5-
// @validateNoDerivedComputationsInEffects
5+
// @validateNoDerivedComputationsInEffects_exp
66
import {useEffect, useState, useRef} from 'react';
77

88
export default function Component({test}) {
@@ -27,7 +27,7 @@ export const FIXTURE_ENTRYPOINT = {
2727
## Code
2828

2929
```javascript
30-
import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects
30+
import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
3131
import { useEffect, useState, useRef } from "react";
3232

3333
export default function Component(t0) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// @validateNoDerivedComputationsInEffects
1+
// @validateNoDerivedComputationsInEffects_exp
22
import {useEffect, useState, useRef} from 'react';
33

44
export default function Component({test}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.expect.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
## Input
33

44
```javascript
5-
// @validateNoDerivedComputationsInEffects
5+
// @validateNoDerivedComputationsInEffects_exp
66
import {useEffect, useState} from 'react';
77

88
function Component({propValue, onChange}) {
@@ -25,7 +25,7 @@ export const FIXTURE_ENTRYPOINT = {
2525
## Code
2626

2727
```javascript
28-
import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects
28+
import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
2929
import { useEffect, useState } from "react";
3030

3131
function Component(t0) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// @validateNoDerivedComputationsInEffects
1+
// @validateNoDerivedComputationsInEffects_exp
22
import {useEffect, useState} from 'react';
33

44
function Component({propValue, onChange}) {
Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
2+
## Input
3+
4+
```javascript
5+
// @validateNoDerivedComputationsInEffects_exp
6+
import {useEffect, useState} from 'react';
7+
8+
function Component({propValue}) {
9+
const [value, setValue] = useState(null);
10+
useEffect(() => {
11+
setValue(propValue);
12+
globalCall();
13+
}, [propValue]);
14+
15+
return <div>{value}</div>;
16+
}
17+
18+
export const FIXTURE_ENTRYPOINT = {
19+
fn: Component,
20+
params: [{propValue: 'test'}],
21+
};
22+
23+
```
24+
25+
## Code
26+
27+
```javascript
28+
import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
29+
import { useEffect, useState } from "react";
30+
31+
function Component(t0) {
32+
const $ = _c(5);
33+
const { propValue } = t0;
34+
const [value, setValue] = useState(null);
35+
let t1;
36+
let t2;
37+
if ($[0] !== propValue) {
38+
t1 = () => {
39+
setValue(propValue);
40+
globalCall();
41+
};
42+
t2 = [propValue];
43+
$[0] = propValue;
44+
$[1] = t1;
45+
$[2] = t2;
46+
} else {
47+
t1 = $[1];
48+
t2 = $[2];
49+
}
50+
useEffect(t1, t2);
51+
let t3;
52+
if ($[3] !== value) {
53+
t3 = <div>{value}</div>;
54+
$[3] = value;
55+
$[4] = t3;
56+
} else {
57+
t3 = $[4];
58+
}
59+
return t3;
60+
}
61+
62+
export const FIXTURE_ENTRYPOINT = {
63+
fn: Component,
64+
params: [{ propValue: "test" }],
65+
};
66+
67+
```
68+
69+
### Eval output
70+
(kind: exception) globalCall is not defined
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// @validateNoDerivedComputationsInEffects
1+
// @validateNoDerivedComputationsInEffects_exp
22
import {useEffect, useState} from 'react';
33

44
function Component({propValue}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.expect.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
## Input
33

44
```javascript
5-
// @validateNoDerivedComputationsInEffects
5+
// @validateNoDerivedComputationsInEffects_exp
66
import {useEffect, useState} from 'react';
77

88
function Component({value, enabled}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// @validateNoDerivedComputationsInEffects
1+
// @validateNoDerivedComputationsInEffects_exp
22
import {useEffect, useState} from 'react';
33

44
function Component({value, enabled}) {

0 commit comments

Comments
 (0)