Welchen Sinn hat die React-Hooks/Exhaustive-Deps-Warnung für State Setter?

Question

Ich erstelle eine Paginierung mit React.

Die Anwendung verwendet den Status, um Paging und Suche zu verwalten. Ich möchte die Paginierung auf Seite 1 zurücksetzen, wenn sich der Suchbegriff ändert.

// Vereinfachtes Beispiel

Funktion useSearchTerm() {
  return React.useState("");
}

Funktion usePage() {
  return React.useState(1);
}

Funktion MyComponent(){
  const [searchTerm, setSearchTerm] = useSearchTerm()
  const [page, setPage] = usePage();

  useEffect(() => {
    setPage(1);
  }, [searchTerm]); // <-- Hier ist die ESLint-Warnung
}

Dies gibt mir eine ESLint-Warnung React Hook useEffect fehlende Abhängigkeit: 'setPage'. Fügen Sie es entweder ein oder entfernen Sie die Abhängigkeit vom useEffect-Hook-Array.eslintreact-hooks/exhaustive-deps.

Aber wenn ich setPage in die Abhängigkeit einbeziehe, wird der Effekt natürlich jedes Mal aufgerufen, wenn ich rendere.

Mache ich bei diesem Anwendungsfall etwas falsch?

Answer 1

这个中间函数似乎是问题所在：

function usePage() {
  return React.useState(1);
}

由 useState 返回的状态设置函数本身不会在每次渲染时重新创建，但通过此外部函数调用它似乎会破坏这一点。这导致依赖项发生变化，如 useEffect 依赖项数组所观察到的。

如果您不需要这个 usePage 函数（在示例中您不需要，但在更大的上下文中可能存在有意义的情况），那么只需将其完全删除并使用直接useState：

const [page, setPage] = useState("");

通常，人们无论如何都不想在函数内调用钩子，因为它可以快速且轻松地导致违反必须在每次渲染上一致且以相同顺序调用钩子的规则。因此，最好将钩子调用保留在组件本身的主体中（以及组件逻辑的早期）。

有时，在某些情况下，您确实希望自定义函数充当 useEffect 中的依赖项。由于声明的函数在每次渲染时都会重新声明，因此您会遇到上面遇到的问题。为了解决这个问题，您可以将该函数包装在 useCallback 挂钩中，该挂钩本身也有一个依赖项数组，与 useEffect 非常相似。这个钩子的目的是创建自定义函数，React 可以将这些函数跨渲染缓存为单个函数实例（除非依赖项发生变化）。例如：

const myCustomFunction = useCallback(args => {
  // use function args, etc.
}, [someDependencies]);