Bug: The ESLint react-hooks/preserve-manual-memoization rule warns against optional chaining operator #35577
Description
eslint-plugin-react-hooks version: 7.0.1
Steps To Reproduce
const Test = ({ obj }) => {
const onClick = useCallback(() => {
if (obj?.id) {
console.log(obj.id);
}
}, [obj?.id]);
return (
<button onClick={onClick}>
Hello
</button>
);
};The current behavior
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.
The expected behavior
No errors
This can be fixed in several trivial ways:
- Use
obj?.idin all places - Introduce the variable:
const onClick = useCallback(() => {
const id = obj?.id;
if (id) {
console.log(id);
}
}, [obj?.id]);