Bagaimana Cara Mengetahui Apakah Elemen React di Unmount atau Tidak?

Dibuat
·
Dilihat13 kali
0

Saya lagi belajar lifecycle komponen React, masih bingung dibagian unmount, apakah ada cara untuk mengetahui atau mengamati apakah elemen di unmount atau tidak?

Katanya fungsi yang dikembalikan dari callback useEffect() akan dieksekusi ketika di unmount , kalau pakai contoh kode di bawah console.log('Hello component di unmount') akan dieksekusi.

function Hello() {
  useEffect(() => {
    return () => {
      console.log('Hello component di unmount');
    };
  }, []);
  return <span>Hello</span>;
}

Pertanyaannya kapan komponen itu di unmount? Bagaimana saya mengetahui kalau komponen itu di unmount?

React
1 Jawaban
0

Cara yang paling mudah adalah dengan mengamati apakah elemen tersebut terlihat di layar atau tidak, tapi tidak semua elemen yang tidak terlihat dilayar berarti di unmount, bisa jadi itu disembunyikan menggunakan CSS diplay: none; yang mana itu juga akan menghilangkan elemen dari layar tapi tidak di unmount.

Cara lain yang lebih akurat adalah dengan menggunakan Developer Tools yang disediakan browser, buka tab Elements, lihat apakah elemen tersebut ada atau tidak, kalau tidak ada berarti di unmount.

Bisa dicoba kode dibawah, tekan tombol unmount/mount sambil memperhatikan tab Elements di Developer Tools.

function Hello() {
  useEffect(() => {
    return () => {
      console.log('Hello component di unmount');
    };
  }, []);
  return <span>Hello</span>;
}

export const App: FC<{ name: string }> = ({ name }) => {
  const [isShown, setIsShown] = useState(true);

  return (
    <div>
      <button onClick={() => setIsShown(!isShown)}>
        {isShown ? 'unmount' : 'mount'}
      </button>
      {isShown && <Hello />}
    </div>
  );
};

Untuk membuktikan fungsi yang dikembalikan callback useEffect() dieksekusi, buka bagian console di Developer Tools, tulisan Hello component di unmount akan dicetak ketika komponen di unmount.

Dibuat

Kamu tau jawabannya?

Ayo bergabung bersama lebih dari 200.000 pengguna lainnya!

Pertanyaan Terkait