[eslint-plugin-react-hooks] Fix cyclic caching for loops containing a… (

#16853)

* [eslint-plugin-react-hooks] Fix cyclic caching for loops containing a condition

* [eslint-plugin-react-hooks] prettier write

* [eslint-plugin-react-hooks] Fix set for tests

* Update packages/eslint-plugin-react-hooks/src/RulesOfHooks.js

Co-Authored-By: Luke Kang <kidkkr@icloud.com>

Co-authored-by: Luke Kang <kidkkr@icloud.com>

packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js

@@ -405,6 +405,18 @@ const tests = {
  useHook();
  }
  `,
+ `
+ // Valid because the neither the condition nor the loop affect the hook call.
+ function App(props) {
+ const someObject = {propA: true};
+ for (const propName in someObject) {
+ if (propName === true) {
+ } else {
+ }
+ }
+ const [myState, setMyState] = useState(null);
+ }
+ `,
  ],
  invalid: [
  {
@@ -640,14 +652,7 @@ const tests = {
  }
  }
  `,
- errors: [
- loopError('useHook1'),
-
- // NOTE: Small imprecision in error reporting due to caching means we
- // have a conditional error here instead of a loop error. However,
- // we will always get an error so this is acceptable.
- conditionalError('useHook2', true),
- ],
+ errors: [loopError('useHook1'), loopError('useHook2', true)],
  },
  {
  code: `

packages/eslint-plugin-react-hooks/src/RulesOfHooks.js

@@ -152,39 +152,41 @@ export default {
  * Populates `cyclic` with cyclic segments.
  */
 
- function countPathsFromStart(segment) {
+ function countPathsFromStart(segment, pathHistory) {
  const {cache} = countPathsFromStart;
  let paths = cache.get(segment.id);
-
- // If `paths` is null then we've found a cycle! Add it to `cyclic` and
- // any other segments which are a part of this cycle.
- if (paths === null) {
- if (cyclic.has(segment.id)) {
- return 0;
- } else {
- cyclic.add(segment.id);
- for (const prevSegment of segment.prevSegments) {
- countPathsFromStart(prevSegment);
- }
- return 0;
+ const pathList = new Set(pathHistory);
+
+ // If `pathList` includes the current segment then we've found a cycle!
+ // We need to fill `cyclic` with all segments inside cycle
+ if (pathList.has(segment.id)) {
+ const pathArray = [...pathList];
+ const cyclicSegments = pathArray.slice(
+ pathArray.indexOf(segment.id) + 1,
+ );
+ for (const cyclicSegment of cyclicSegments) {
+ cyclic.add(cyclicSegment);
  }
+
+ return 0;
  }
 
+ // add the current segment to pathList
+ pathList.add(segment.id);
+
  // We have a cached `paths`. Return it.
  if (paths !== undefined) {
  return paths;
  }
 
- // Compute `paths` and cache it. Guarding against cycles.
- cache.set(segment.id, null);
  if (codePath.thrownSegments.includes(segment)) {
  paths = 0;
  } else if (segment.prevSegments.length === 0) {
  paths = 1;
  } else {
  paths = 0;
  for (const prevSegment of segment.prevSegments) {
- paths += countPathsFromStart(prevSegment);
+ paths += countPathsFromStart(prevSegment, pathList);
  }
  }
 
@@ -221,43 +223,45 @@ export default {
  * Populates `cyclic` with cyclic segments.
  */
 
- function countPathsToEnd(segment) {
+ function countPathsToEnd(segment, pathHistory) {
  const {cache} = countPathsToEnd;
  let paths = cache.get(segment.id);
-
- // If `paths` is null then we've found a cycle! Add it to `cyclic` and
- // any other segments which are a part of this cycle.
- if (paths === null) {
- if (cyclic.has(segment.id)) {
- return 0;
- } else {
- cyclic.add(segment.id);
- for (const nextSegment of segment.nextSegments) {
- countPathsToEnd(nextSegment);
- }
- return 0;
+ let pathList = new Set(pathHistory);
+
+ // If `pathList` includes the current segment then we've found a cycle!
+ // We need to fill `cyclic` with all segments inside cycle
+ if (pathList.has(segment.id)) {
+ const pathArray = Array.from(pathList);
+ const cyclicSegments = pathArray.slice(
+ pathArray.indexOf(segment.id) + 1,
+ );
+ for (const cyclicSegment of cyclicSegments) {
+ cyclic.add(cyclicSegment);
  }
+
+ return 0;
  }
 
+ // add the current segment to pathList
+ pathList.add(segment.id);
+
  // We have a cached `paths`. Return it.
  if (paths !== undefined) {
  return paths;
  }
 
- // Compute `paths` and cache it. Guarding against cycles.
- cache.set(segment.id, null);
  if (codePath.thrownSegments.includes(segment)) {
  paths = 0;
  } else if (segment.nextSegments.length === 0) {
  paths = 1;
  } else {
  paths = 0;
  for (const nextSegment of segment.nextSegments) {
- paths += countPathsToEnd(nextSegment);
+ paths += countPathsToEnd(nextSegment, pathList);
  }
  }
- cache.set(segment.id, paths);
 
+ cache.set(segment.id, paths);
  return paths;
  }