Apakah gunanya amaran react-hooks/exhaustive-deps untuk penetap keadaan?

Question

Saya sedang membina penomboran menggunakan React.

Aplikasi menggunakan keadaan untuk mengurus halaman dan carian. Saya ingin menetapkan semula penomboran ke halaman 1 apabila istilah carian berubah.

// Contoh ringkas

fungsi useSearchTerm() {
  kembalikan React.useState("");
}

fungsi usePage() {
  kembali React.useState(1);
}

fungsi MyComponent(){
  const [searchTerm, setSearchTerm] = gunakanSearchTerm()
  const [halaman, setPage] = usePage();

  useEffect(() => {
    setPage(1);
  }, [searchTerm]); // <-- Berikut ialah amaran ESLint
}

Ini memberi saya amaran ESLint React Hook useEffect tiada pergantungan: 'setPage'. Sama ada sertakan atau alih keluar pergantungan pada tatasusunan cangkuk useEffect.eslintreact-hooks/exhaustive-deps.

Tetapi sudah tentu, jika saya memasukkan setPage dalam kebergantungan, kesannya akan dipanggil setiap kali saya membuat persembahan.

Adakah saya melakukan sesuatu yang salah dengan kes penggunaan ini?

Answer 1

Fungsi perantaraan ini nampaknya menjadi masalah:

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

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

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

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

Secara amnya, seseorang tidak mahu memanggil cangkuk di dalam fungsi, kerana ia boleh dengan cepat dan mudah menyebabkan melanggar peraturan bahawa cangkuk mesti dipanggil secara konsisten dan dalam susunan yang sama pada setiap paparan. Oleh itu, adalah lebih baik untuk menyimpan panggilan cangkuk dalam badan komponen itu sendiri (dan pada awal logik komponen).

Kadang-kadang, terdapat situasi di mana anda sangat inginkan fungsi tersuai untuk bertindak useEffect 中的依赖项。由于声明的函数在每次渲染时都会重新声明，因此您会遇到上面遇到的问题。为了解决这个问题，您可以将该函数包装在 useCallback 挂钩中，该挂钩本身也有一个依赖项数组，与 useEffect sangat serupa. Tujuan cangkuk ini adalah untuk mencipta fungsi tersuai yang React boleh cache sebagai contoh fungsi tunggal merentas pemaparan (melainkan kebergantungan berubah). Contohnya:

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