facebook / react · Issue No. 37141
React version: 18.2.0
.finally() block inside a useCallback, where the callback is called in a useEffect.Link to code example: https://codesandbox.io/p/devbox/rcl9wz
You can run npx eslint in the terminal and it shows the false positive. src/index.tsx shows the actual code.
Pasting it here for convenience too:
import { useCallback, useEffect, useState } from "react";
const Component = () => {
const [state, setState] = useState(0);
const callback = useCallback(() => {
new Promise(() => {}).finally(() => {
setState(1); // BUG: has a warning
});
new Promise(() => {}).then(() => {
setState(1); // does not have a warning
});
}, []);
useEffect(() => {
new Promise(() => {}).finally(() => {
setState(1); // does not have a warning
});
callback();
}, [callback]);
return state;
};
export default Component;
Warning on line 7, which is a setter call inside a .finally() inside a useCallback the result of which is called in a useEffect, but not on a setter call inside a .then() that's otherwise identical, and not in a .finally() that's not in a useCallback.
There should be no warning, it's the same case as with the .then() that shows no warning.
Relay reads this issue against the repository's contribution signals: the files it is likely to touch, how the maintainers triage work this size, and what the first contribution would exercise.
The full analysis for this issue is still being assembled. Until then, the description above and the thread on GitHub are the most reliable context.