Skip to content

Commit 9599e7a

Browse files
authored
[compiler] Adjustments to exhaustive deps messages, disable the lint rule (facebook#35192)
Similar to ValidateHookUsage, we implement this check in the compiler for safety but (for now) continue to rely on the existing rule for actually reporting errors to users. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/35192). * facebook#35201 * facebook#35202 * __->__ facebook#35192
1 parent 67c1487 commit 9599e7a

File tree

4 files changed

+20
-10
lines changed

4 files changed

+20
-10
lines changed

compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1067,7 +1067,15 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
10671067
name: 'memo-dependencies',
10681068
description:
10691069
'Validates that useMemo() and useCallback() specify comprehensive dependencies without extraneous values. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.',
1070-
preset: LintRulePreset.RecommendedLatest,
1070+
/**
1071+
* TODO: the "MemoDependencies" rule largely reimplements the "exhaustive-deps" non-compiler rule,
1072+
* allowing the compiler to ensure it does not regress change behavior due to different dependencies.
1073+
* We previously relied on the source having ESLint suppressions for any exhaustive-deps violations,
1074+
* but it's more reliable to verify it within the compiler.
1075+
*
1076+
* Long-term we should de-duplicate these implementations.
1077+
*/
1078+
preset: LintRulePreset.Off,
10711079
};
10721080
}
10731081
case ErrorCategory.IncompatibleLibrary: {

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -303,9 +303,11 @@ function runWithEnvironment(
303303
inferReactivePlaces(hir);
304304
log({kind: 'hir', name: 'InferReactivePlaces', value: hir});
305305

306-
if (env.config.validateExhaustiveMemoizationDependencies) {
307-
// NOTE: this relies on reactivity inference running first
308-
validateExhaustiveDependencies(hir).unwrap();
306+
if (env.enableValidations) {
307+
if (env.config.validateExhaustiveMemoizationDependencies) {
308+
// NOTE: this relies on reactivity inference running first
309+
validateExhaustiveDependencies(hir).unwrap();
310+
}
309311
}
310312

311313
rewriteInstructionKindsBasedOnReassignment(hir);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@ export function validateExhaustiveDependencies(
284284
if (missing.length !== 0) {
285285
const diagnostic = CompilerDiagnostic.create({
286286
category: ErrorCategory.MemoDependencies,
287-
reason: 'Found non-exhaustive dependencies',
287+
reason: 'Found missing memoization dependencies',
288288
description:
289289
'Missing dependencies can cause a value not to update when those inputs change, ' +
290290
'resulting in stale UI',
@@ -309,7 +309,7 @@ export function validateExhaustiveDependencies(
309309
reason: 'Found unnecessary memoization dependencies',
310310
description:
311311
'Unnecessary dependencies can cause a value to update more often than necessary, ' +
312-
'which can cause effects to run more than expected',
312+
'causing performance regressions and effects to fire more often than expected',
313313
});
314314
diagnostic.withDetails({
315315
kind: 'error',

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-exhaustive-deps.expect.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ function Component({x, y, z}) {
5353
```
5454
Found 4 errors:
5555

56-
Error: Found non-exhaustive dependencies
56+
Error: Found missing memoization dependencies
5757

5858
Missing dependencies can cause a value not to update when those inputs change, resulting in stale UI.
5959

@@ -66,7 +66,7 @@ error.invalid-exhaustive-deps.ts:7:11
6666
9 | }, [x?.y.z?.a.b]);
6767
10 | const b = useMemo(() => {
6868

69-
Error: Found non-exhaustive dependencies
69+
Error: Found missing memoization dependencies
7070

7171
Missing dependencies can cause a value not to update when those inputs change, resulting in stale UI.
7272

@@ -81,7 +81,7 @@ error.invalid-exhaustive-deps.ts:15:11
8181

8282
Error: Found unnecessary memoization dependencies
8383

84-
Unnecessary dependencies can cause a value to update more often than necessary, which can cause effects to run more than expected.
84+
Unnecessary dependencies can cause a value to update more often than necessary, causing performance regressions and effects to fire more often than expected.
8585

8686
error.invalid-exhaustive-deps.ts:31:5
8787
29 | return [];
@@ -92,7 +92,7 @@ error.invalid-exhaustive-deps.ts:31:5
9292
33 | const ref2 = useRef(null);
9393
34 | const ref = z ? ref1 : ref2;
9494

95-
Error: Found non-exhaustive dependencies
95+
Error: Found missing memoization dependencies
9696

9797
Missing dependencies can cause a value not to update when those inputs change, resulting in stale UI.
9898

0 commit comments

Comments
 (0)