Skip to content

Commit 7f74f2b

Browse files
committed
[compiler] Adjustments to exhaustive deps messages, disable the lint rule
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.
1 parent b55a7c8 commit 7f74f2b

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)