The issue involves modifying ESLint rule behavior to handle optional chaining in dependency arrays.
The issue reports a false positive warning from the ESLint react-hooks/preserve-manual-memoization rule when using optional chaining in dependency arrays. The fix would require updating the rule's dependency comparison logic to account for optional chaining patterns. The main challenge is ensuring the change doesn't introduce new false negatives while maintaining the rule's safety guarantees.
eslint-plugin-react-hooks version: 7.0.1
const Test = ({ obj }) => {
const onClick = useCallback(() => {
if (obj?.id) {
console.log(obj.id);
}
}, [obj?.id]);
return (
<button onClick={onClick}>
Hello
</button>
);
};
Compilation Skipped: Existing memoization could not be preserved
React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `obj`, but the source dependencies were [obj?.id]. Inferred less specific property than source.
No errors
This can be fixed in several trivial ways:
obj?.id in all placesconst onClick = useCallback(() => {
const id = obj?.id;
if (id) {
console.log(id);
}
}, [obj?.id]);
Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!