React: Pengantar Singkat untuk useEffect

Apa itu efek / efek samping ?

Istilah efek samping dan efek digunakan secara bergantian dan memiliki arti yang sama di Bereaksi: mereka merujuk pada operasi yang tidak memengaruhi UI atau nilai keluaran. Jika operasi yang Anda lakukan mengelola perubahan status apa pun selain nilai pengembalian akhir, maka itu adalah efek sampingnya!

Fungsi dari komponen React adalah untuk menangani render dan manipulasi UI. Karena efek samping tidak memengaruhi fase render, efek samping tidak termasuk dalam bagian utama komponen.

Apa itu useEffect?

useEffect adalah React Hook yang memungkinkan Anda menjalankan efek samping secara independen dari rendering.

Jika Anda memiliki bagian kode yang tidak terkait langsung dengan UI atau tugas yang tidak sinkron dan dijalankan di luar aliran kontrol normal, Anda harus memasukkannya ke dalam useEffecthook. Ini memungkinkan mereka untuk beroperasi di luar siklus render dan berfungsi di belakang layar tanpa mengganggu UI.

useEffect menerima dua argumen:

• panggilan balik (diperlukan) — efek — yang akan dijalankan setelah evaluasi komponen jika dependensi yang ditentukan berubah;
• dependensi (opsional) yang sedang diperiksa oleh fungsi itu.

Contoh perhitungan yang tidak bergantung pada render dan harus berada di dalam useEffecthook:

• menggunakan timer;
• permintaan jaringan (seperti fetch);
• membaca dari penyimpanan lokal;
• mendaftarkan dan membatalkan pendaftaran pendengar acara;
• memperbarui DOM secara manual.

• import { useEffect } from 'react'
• Logika efek samping masuk ke dalam fungsi panggilan balik.
• Ketergantungan mengontrol kapan Anda ingin efek samping dijalankan. Mereka dilewatkan sebagai array.

useEffect(() => { logic }, [dependencies]);

Mari kita lihat cara useEffectkerjanya. Dalam contoh ini, kami mendapatkan informasi pengguna dari database setelah loggedInstatus diperbarui ke true, lalu kami mencetak info tersebut ke halaman:

import { useState, useEffect } from 'react';
function App() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [userName, setUserName] = useState("");
  useEffect( () => {
    if (loggedIn === true) {
      // [ retrieving user info from an imaginary database ]
      // [ we set the returned user info in state ]
      setUserName("Lisa Simpson");
    } else {
      setUserName("");
    }
  }, [loggedIn]);
  return (
    <div>
      <h1>Hello</h1>
      <button onClick={ () => setLoggedIn(!loggedIn) } >Log in / out</button>
      {
        loggedIn === true
          ? <p>Hello, {userName}</p>
          : <p>Please log in</p>
      }
    </div>
  )
};
export default App;

• Kami memiliki ifpernyataan yang memeriksa database imajiner untuk melihat apakah pengguna loggedIn. Jika ya, kami memperbarui status userName. (Sebagai gantinya, kami memiliki logika untuk menampilkan nama mereka di layar jika loggedIn === true.)
• Ketika tombol (di balik) diklik, loggedIndiperbarui dalam status menggunakan setLoggedInfungsi.
• useEffectberjalan setiap kali loggedInstatus berubah, karena kami telah melewati loggedInsebagai ketergantungan.
• useEffecttidak tidak dijalankan ketika setUserNameberjalan fungsi, karena kita belum memasukkannya ke dalam array ketergantungan.

Dependensi adalah cara kita mengontrol saat useEffectdijalankan.

• Jika Anda ingin useEffectmenjalankan setiap render, hilangkan dependensi.
• Jika Anda ingin menjalankannya hanya sekali setelah render awal, sediakan array kosong.
• Jika Anda ingin menjalankannya setelah nilai tertentu berubah, berikan itu sebagai ketergantungan.

• Jika Anda menggunakan propsatau statenilai, Anda harus mendeklarasikan ini sebagai dependensi; ketika nilai-nilai ini berubah, useEffectakan berjalan. (Dalam contoh di atas, boleh saja menghilangkan setUserNamefungsi dari dependensi karena ini bukan nilai status -- ini adalah fungsi yang memperbarui nilai status, jadi tidak akan pernah sinkron dengan status.)

• fungsi pembaruan status;
• API atau fungsi bawaan;
• variabel atau fungsi yang didefinisikan di luar fungsi komponen (seperti fungsi pembantu yang ada di file terpisah).

Beberapa efek samping - seperti timer atau langganan (koneksi ke sumber data yang persisten) - memerlukan pembersihan, karena kami tidak ingin efek samping tersebut muncul setelah komponen dihapus dari DOM.

Untuk membersihkan kami hanya mengembalikan fungsi di dalam useEffectdan itu akan membersihkan; fungsi-fungsi ini tepat disebut sebagai cleanup functions. Fungsi pembersihan ini berjalan setelah render berikutnya, tetapi sebelum render berikutnya useEffect.