React: eslint-plugin-react-hooks : 조건 외부에서 '후크가 조건부로 호출됩니다'오류

이 특정 예에서 다음을 발견했습니다.

pathsFromStartToEnd 은 (는) 3
allPathsFromStartToEnd 은 2

possiblyHasEarlyReturn 도 true

이 특정 오류는 pathsFromStartToEnd 및 allPathsFromStartToEnd 가 같지 않을 때보고됩니다.

RulesOfHooks.js 라인 404 참조

for..in 루프 내부의 코드를 별도의 함수로 추상화하면 lint 오류가 사라집니다.

이 경우 pathsFromStartToEnd 및 allPathsFromStartToEnd 모두 2 같습니다.

  const someObject = { propA: true, propB: false };
  const someFunction = (propName) => {
    if (propName === true) {
      console.log("something");
    } else {
      console.log("whatever");
    }
  }
  for (const propName in someObject) {
    someFunction(propName)
  }
  const [myState, setMyState] = useState(null);

왜 그런지 모르겠습니다.

@gaearon ,이 문제를 해결하고 해결하는 MR을 만들었습니다 (# 16853).

이것이 발생하는 주된 이유는 allPathsFromStartToEnd 값이 잘못 계산 되었기 때문입니다.
이 예에서 시작부터 끝까지의 경로 수는 3이어야하지만 함수는 2를 반환합니다.

이것이 발생하는 이유는 순환 경로의 잘못된 캐싱 때문입니다. 따라서 일반 그래프 순회에서 경로 기록도 필요하지만 순환 요소 목록 만 취하며이 경로로 이어지는 요소는 알 수 없습니다.
결과적으로 for...in obj 에서 조건이 사용되면 방향에 따라 일부 경로가 손실 될 수 있습니다.

이것은 2.4.0에서 여전히 문제이며 약간 더 간단한 재현입니다.

import * as React from "react";

function Component() {
  let isLastEven = false;
  for (let x of [1, 2, 3]) {
    if (x % 2 == 0) {
      isLastEven = true;
    } else {
      isLastEven = false;
    }
  }
  let y = React.useMemo(() => 1, []);
  return <div>{y}</div>;
}

# 16853을 다시 열 수 있습니까?

https://github.com/facebook/react/pull/16853을 병합했습니다