Lewati pengait kustom useEffect render pertama

Saya ingin membuat pengait khusus yang akan melewati render useEffect pertama dan menggunakannya kembali di mana-mana.

Saya membuat contoh pengait khusus yang berfungsi:

function useEffectSkipFirst(fn, arr) {
  const isFirstRun = useRef(true);

  useEffect(() => {
    if (isFirstRun.current) {
      isFirstRun.current = false;
      return;
    }

    fn();
  }, [...arr]);
}

Cara Penggunaan:

useEffectSkipFirst(fn, []);

Masalahnya adalah saya mendapat beberapa peringatan yang saya coba pahami dan berharap Anda dapat membantu saya:

React Hook useEffect memiliki ketergantungan yang hilang: 'fn'. Sertakan atau hapus larik ketergantungan. Jika 'fn' berubah terlalu sering, temukan komponen induk yang mendefinisikannya dan gabungkan definisi itu dalam useCallback. (react-hooks / exhaustive-deps) eslint

React Hook useEffect memiliki elemen penyebaran dalam larik ketergantungannya. Ini berarti kami tidak dapat memverifikasi secara statis apakah Anda telah meneruskan dependensi yang benar. (react-hooks / exhaustive-deps)

Contoh Codesandbox.

Kode contoh lengkap:

import React, { useRef, useEffect, useState } from "react";
import ReactDOM from "react-dom";

function useEffectSkipFirst(fn, arr) {
  const isFirstRun = useRef(true);

  useEffect(() => {
    if (isFirstRun.current) {
      isFirstRun.current = false;
      return;
    }

    fn();
  }, [...arr]);
}

function App() {
  const [clicks, setClicks] = useState(0);
  const [date, setDate] = useState(Date.now());
  const [useEffectRunTimes, setTseEffectRunTimes] = useState(0);

  useEffectSkipFirst(() => {
    addEffectRunTimes();
  }, [clicks, date]);

  function addEffectRunTimes() {
    setTseEffectRunTimes(useEffectRunTimes + 1);
  }

  return (
    <div className="App">
      <div>clicks: {clicks}</div>
      <div>date: {new Date(date).toString()}</div>
      <div>useEffectRunTimes: {useEffectRunTimes}</div>
      <button onClick={() => setClicks(clicks + 1)}>add clicks</button>
      <button onClick={() => setDate(Date.now())}>update date</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Saya melihat satu solusi untuk masalah Anda.

Pertama, Anda perlu mengurangi larik dependensi useEffect menjadi satu nilai (dengan menggunakan hook useMemo).

Kemudian pada efeknya, Anda harus menggunakan useRefuntuk menyimpan nilai lama dari nilai ketergantungan ini, sehingga Anda akan dapat memanggil fnfungsi hanya ketika ketergantungan telah berubah .

Berikut adalah kode pengait khusus:

function useEffectSkipFirst(fn, depValue) {
  const oldDepValueRef = useRef(depValue);

  useEffect(() => {
    if (depValue !== oldDepValueRef.current) {
      // Note that this code will not be executed the first time as
      // we initialized oldDepValueRef with depValue
      fn();
      oldDepValueRef.current = depValue;
    }
  }, [fn, depValue]);
}

Berikut adalah kode untuk mengurangi dep array menjadi satu nilai menggunakan useMemo:

// I decided the return an object but it could be an array or something else
const depValue = useMemo(() => ({}), [clicks, date]);

useEffectSkipFirst(addEffectRunTimes, depValue);

function addEffectRunTimes() {
  // When the value depends on the previous value, 
  // you can use a function to update the state value
  setTseEffectRunTimes(v => v + 1);
}

Ngomong-ngomong jika addEffectRunTimesfungsinya hanya digunakan dalam efek, Anda bisa langsung menulis:

useEffectSkipFirst(() => setTseEffectRunTimes(v => v + 1), depValue);

Fungsi fn yang Anda ambil sebagai panggilan balik untuk useEffectSkipFirstperubahan pada setiap render. Juga karena fungsi ini dipanggil di dalam useEffectSkipFirst, linter meminta Anda untuk mendefinisikannya sebagai dependensi.

Namun, cara Anda mengimplementasikannya, terserah kode yang diimplementasikan useEffectSkipFirstuntuk memastikan bahwa semua nilai memiliki closure yang benar dan Anda bisa melewati mendefinisikannya sebagai dependensi ke useEffect. Namun jika Anda melakukannya, ini mungkin mengarah ke loop tak terbatas.

Anda dapat memeriksa posting ini juga untuk lebih jelasnya: Bagaimana cara memperbaiki peringatan ketergantungan yang hilang saat menggunakan useEffect React Hook?

Peringatan pertama pada dasarnya berarti bahwa semua dependensi yang direferensikan di dalam useEffectcallback harus dideklarasikan di dalam larik dependensinya. Dokumentasi resmi memberikan penjelasan lebih lanjut tentang menambahkan fungsi ke larik ketergantungan.

Waring kedua berarti bahwa Anda tidak dapat menentukan dependensi secara dinamis, misalnya dengan cara membuatnya tidak diketahui hingga runtime. Ini karena dependensi dibandingkan secara statis sebelum eksekusi kode dan oleh karena itu harus dieja secara eksplisit.