상태 설정자에 대한 React-hooks/exhaustive-deps 경고의 요점은 무엇입니까?

Question

React를 사용하여 페이지 매김을 만들고 있습니다.

애플리케이션은 상태를 사용하여 페이징 및 검색을 관리합니다. 검색어가 변경되면 페이지 매김을 1페이지로 재설정하고 싶습니다.

// 단순화된 예

함수 useSearchTerm() {
  return React.useState("");
}

함수 usePage() {
  return React.useState(1);
}

함수 MyComponent(){
  const [searchTerm, setSearchTerm] = useSearchTerm()
  const [페이지, setPage] = usePage();

  useEffect(() => {
    setPage(1);
  }, [searchTerm]); // <-- ESLint 경고는 다음과 같습니다.
}

이렇게 하면 ESLint 경고 React Hook useEffect 누락 종속성: 'setPage'가 표시됩니다. 이를 포함하거나 useEffect 후크 array.eslintreact-hooks/exhaustive-deps에 대한 종속성을 제거하십시오.

하지만 물론 종속성에 setPage를 포함하면 렌더링할 때마다 효과가 호출됩니다.

이 사용 사례에 제가 뭔가 잘못하고 있는 걸까요?

Answer 1

이 중간 기능이 문제인 것 같습니다:

으아악

useState 返回的状态设置函数本身不会在每次渲染时重新创建，但通过此外部函数调用它似乎会破坏这一点。这导致依赖项发生变化，如 useEffect 종속성 배열에 의해 관찰됩니다.

이것이 필요하지 않은 경우 usePage 函数（在示例中您不需要，但在更大的上下文中可能存在有意义的情况），那么只需将其完全删除并使用直接useState:

으아악

일반적으로 함수 내에서 후크를 호출하고 싶지 않은 이유는 후크가 모든 렌더링에서 일관되고 동일한 순서로 호출되어야 한다는 규칙을 쉽고 빠르게 위반할 수 있기 때문입니다. 따라서 구성 요소 자체의 본문(및 구성 요소 논리 초기)에서 후크 호출을 유지하는 것이 가장 좋습니다.

가끔 정말로 매우 유사하게 작동하는 사용자 정의 기능을 useEffect 中的依赖项。由于声明的函数在每次渲染时都会重新声明，因此您会遇到上面遇到的问题。为了解决这个问题，您可以将该函数包装在 useCallback 挂钩中，该挂钩本身也有一个依赖项数组，与 useEffect원하는 상황이 있습니다. 이 후크의 목적은 React가 렌더링 전반에 걸쳐 단일 함수 인스턴스로 캐시할 수 있는 사용자 정의 함수를 생성하는 것입니다(종속성이 변경되지 않는 한). 예:

으아악