Quel est l'intérêt de l'avertissement de réaction-hooks/exhaustive-deps pour le passeur d'état ?

Question

Je crée une pagination à l'aide de React.

L'application utilise l'état pour gérer la pagination et la recherche. Je souhaite réinitialiser la pagination à la page 1 lorsque le terme de recherche change.

// Exemple simplifié

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

fonction utilisationPage() {
  retourner React.useState(1);
}

fonction MonComposant(){
  const [searchTerm, setSearchTerm] = useSearchTerm()
  const [page, setPage] = usePage();

  useEffect(() => {
    setPage(1);
  }, [searchTerm]); // <-- Voici l'avertissement ESLint
}
Cela me donne un avertissement ESLint React Hook useEffect dépendance manquante : 'setPage'. Incluez-le ou supprimez la dépendance sur useEffect hook array.eslintreact-hooks/exhaustive-deps. 

Mais bien sûr, si j'inclus setPage dans la dépendance, l'effet sera appelé à chaque rendu. 
Est-ce que je fais quelque chose de mal avec ce cas d'utilisation ? 

Answer 1

Cette fonction intermédiaire semble être le problème :

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

Observé par le tableau useState 返回的状态设置函数本身不会在每次渲染时重新创建，但通过此外部函数调用它似乎会破坏这一点。这导致依赖项发生变化，如 useEffectdependances.

Si vous n'en avez pas besoin usePage 函数（在示例中您不需要，但在更大的上下文中可能存在有意义的情况），那么只需将其完全删除并使用直接useState :

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

En général, de toute façon, on ne veut pas appeler des hooks à l'intérieur d'une fonction, car cela peut rapidement et facilement conduire à une violation de la règle selon laquelle les hooks doivent être appelés de manière cohérente et dans le même ordre à chaque rendu. Par conséquent, il est préférable de conserver les appels de hook dans le corps du composant lui-même (et au début de la logique du composant).

Parfois, il y a des situations où vous vraiment voulez qu'une fonction personnalisée agisse useEffect 中的依赖项。由于声明的函数在每次渲染时都会重新声明，因此您会遇到上面遇到的问题。为了解决这个问题，您可以将该函数包装在 useCallback 挂钩中，该挂钩本身也有一个依赖项数组，与 useEffect de manière très similaire. Le but de ce hook est de créer des fonctions personnalisées que React peut mettre en cache en tant qu'instance de fonction unique dans les rendus (sauf si les dépendances changent). Par exemple :

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