[eprh] Temporarily disable ref access in render validation (#32839)
This rule currently has a few false positives, so let's disable it for now (just in the eslint rule, it's still enabled in the compiler) while we iterate on it.
lauren committed
Apr 9, 2025 at 14:49 UTC
ff697fc58be53dd485bd2babb826bc6cd664929c
4 files changed
+20
-62
compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts
-28
@@ -92,36 +92,8 @@ const tests: CompilerTestCases = {
92
}
93
`,
94
},
95
- {
96
- // Don't report the issue if Flow already has
97
- name: '[InvalidInput] Ref access during render',
98
- code: normalizeIndent`
99
- function Component(props) {
100
- const ref = useRef(null);
101
- // $FlowFixMe[react-rule-unsafe-ref]
102
- const value = ref.current;
103
- return value;
104
- }
105
- `,
106
- },
95
],
96
invalid: [
109
- {
110
- name: '[InvalidInput] Ref access during render',
111
- code: normalizeIndent`
112
- function Component(props) {
113
- const ref = useRef(null);
114
- const value = ref.current;
115
- return value;
116
- }
117
- `,
118
- errors: [
119
- {
120
- message:
121
- 'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
122
- },
123
- ],
124
- },
97
{
98
name: 'Reportable levels can be configured',
99
options: [{reportableLevels: new Set([ErrorSeverity.Todo])}],
compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
+10
-3
@@ -105,6 +105,9 @@ const COMPILER_OPTIONS: Partial<PluginOptions> = {
105
panicThreshold: 'none',
106
// Don't emit errors on Flow suppressions--Flow already gave a signal
107
flowSuppressions: false,
108
+ environment: validateEnvironmentConfig({
109
+ validateRefAccessDuringRender: false,
110
+ }),
111
};
112
113
const rule: Rule.RuleModule = {
@@ -149,10 +152,14 @@ const rule: Rule.RuleModule = {
152
}
153
154
let shouldReportUnusedOptOutDirective = true;
152
- const options: PluginOptions = {
153
- ...parsePluginOptions(userOpts),
155
+ const options: PluginOptions = parsePluginOptions({
156
...COMPILER_OPTIONS,
155
- };
157
+ ...userOpts,
158
+ environment: {
159
+ ...COMPILER_OPTIONS.environment,
160
+ ...userOpts.environment,
161
+ },
162
+ });
163
const userLogger: Logger | null = options.logger;
164
options.logger = {
165
logEvent: (filename, event): void => {
packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRule-test.ts
-28
@@ -94,36 +94,8 @@ const tests: CompilerTestCases = {
94
}
95
`,
96
},
97
- {
98
- // Don't report the issue if Flow already has
99
- name: '[InvalidInput] Ref access during render',
100
- code: normalizeIndent`
101
- function Component(props) {
102
- const ref = useRef(null);
103
- // $FlowFixMe[react-rule-unsafe-ref]
104
- const value = ref.current;
105
- return value;
106
- }
107
- `,
108
- },
97
],
98
invalid: [
111
- {
112
- name: '[InvalidInput] Ref access during render',
113
- code: normalizeIndent`
114
- function Component(props) {
115
- const ref = useRef(null);
116
- const value = ref.current;
117
- return value;
118
- }
119
- `,
120
- errors: [
121
- {
122
- message:
123
- 'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
124
- },
125
- ],
126
- },
99
{
100
name: 'Reportable levels can be configured',
101
options: [{reportableLevels: new Set([ErrorSeverity.Todo])}],
packages/eslint-plugin-react-hooks/src/rules/ReactCompiler.ts
+10
-3
@@ -107,6 +107,9 @@ const COMPILER_OPTIONS: Partial<PluginOptions> = {
107
panicThreshold: 'none',
108
// Don't emit errors on Flow suppressions--Flow already gave a signal
109
flowSuppressions: false,
110
+ environment: validateEnvironmentConfig({
111
+ validateRefAccessDuringRender: false,
112
+ }),
113
};
114
115
const rule: Rule.RuleModule = {
@@ -151,10 +154,14 @@ const rule: Rule.RuleModule = {
154
}
155
156
let shouldReportUnusedOptOutDirective = true;
154
- const options: PluginOptions = {
155
- ...parsePluginOptions(userOpts),
157
+ const options: PluginOptions = parsePluginOptions({
158
...COMPILER_OPTIONS,
157
- };
159
+ ...userOpts,
160
+ environment: {
161
+ ...COMPILER_OPTIONS.environment,
162
+ ...userOpts.environment,
163
+ },
164
+ });
165
const userLogger: Logger | null = options.logger;
166
options.logger = {
167
logEvent: (eventFilename, event): void => {