Kapan menggunakan React setState callback

Ketika keadaan komponen reaksi berubah, metode render disebut. Karenanya untuk setiap perubahan keadaan, tindakan dapat dilakukan dalam badan metode render. Apakah ada use case khusus untuk callback setState?

Ya ada, karena setStatebekerja dengan asynchronouscara tertentu. Itu berarti setelah memanggil setStateyang this.statevariabel tidak segera berubah. jadi jika Anda ingin melakukan tindakan segera setelah menetapkan status pada variabel keadaan dan kemudian mengembalikan hasilnya, panggilan balik akan berguna

Perhatikan contoh di bawah ini

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value });
  this.validateTitle();
},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

Kode di atas mungkin tidak berfungsi seperti yang diharapkan karena titlevariabel mungkin tidak bermutasi sebelum validasi dilakukan di atasnya. Sekarang Anda mungkin bertanya-tanya bahwa kita dapat melakukan validasi dalam render()fungsi itu sendiri tetapi akan lebih baik dan lebih bersih jika kita dapat menangani ini dalam fungsi changeTitle sendiri karena itu akan membuat kode Anda lebih terorganisir dan dapat dipahami

Dalam hal ini panggilan balik berguna

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value }, function() {
    this.validateTitle();
  });

},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

Contoh lain adalah ketika Anda ingin dispatchdan bertindak ketika negara berubah. Anda akan ingin melakukannya dalam panggilan balik dan bukan render()seperti yang akan disebut setiap kali rerendering terjadi dan karenanya banyak skenario seperti itu mungkin terjadi di mana Anda akan membutuhkan panggilan balik.

Kasus lain adalah a API Call

Suatu kasus dapat muncul ketika Anda perlu melakukan panggilan API berdasarkan perubahan status tertentu, jika Anda melakukannya dalam metode render, itu akan dipanggil pada setiap onStateperubahan render atau karena beberapa Prop diturunkan ke Child Componentperubahan.

Dalam hal ini Anda ingin menggunakan a setState callbackuntuk meneruskan nilai status yang diperbarui ke panggilan API

....
changeTitle: function (event) {
  this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
  // Call API with the updated value
}
....

this.setState({
    name:'value' 
},() => {
    console.log(this.state.name);
});

1. usecase yang muncul di benak saya, adalah apipanggilan, yang seharusnya tidak masuk ke render, karena akan berjalan untuk eachperubahan keadaan. Dan panggilan API harus dilakukan hanya pada perubahan status khusus, dan tidak pada setiap render.

changeSearchParams = (params) => {
  this.setState({ params }, this.performSearch)
} 

performSearch = () => {
  API.search(this.state.params, (result) => {
    this.setState({ result })
  });
}

Karenanya untuk setiap perubahan keadaan, tindakan dapat dilakukan dalam badan metode render.

Praktek yang sangat buruk , karena render-metode harus murni, itu berarti tidak ada tindakan, perubahan negara, panggilan api, harus dilakukan, hanya komposit pandangan Anda dan kembalikan. Tindakan harus dilakukan pada beberapa acara saja. Render bukan acara, tapi componentDidMountmisalnya.

Pertimbangkan panggilan setState

this.setState({ counter: this.state.counter + 1 })

IDE

setState dapat dipanggil dalam fungsi async

Jadi Anda tidak bisa mengandalkan this. Jika panggilan di atas dilakukan di dalam fungsi async thisakan merujuk ke status komponen pada titik waktu tersebut, tetapi kami berharap ini merujuk ke properti di dalam status pada saat setState memanggil atau memulai tugas async. Dan sebagai tugas adalah panggilan async sehingga properti itu mungkin telah berubah pada waktunya. Oleh karena itu tidak dapat diandalkan untuk menggunakan thiskata kunci untuk merujuk ke beberapa properti negara sehingga kami menggunakan fungsi callback yang argumennya adalahState sebelumnya dan alat peraga yang berarti ketika tugas async dilakukan dan sudah waktunya untuk memperbarui keadaan menggunakan panggilan setState prevState akan merujuk ke status sekarang ketika setState belum dimulai. Memastikan keandalan bahwa nextState tidak akan rusak.

Kode yang salah: akan menyebabkan korupsi data

this.setState(
   {counter:this.state.counter+1}
 );

Kode yang benar dengan setState memiliki fungsi panggilan balik:

 this.setState(
       (prevState,props)=>{
           return {counter:prevState.counter+1};
        }
    );

Jadi setiap kali kita perlu memperbarui keadaan kita saat ini ke keadaan berikutnya berdasarkan nilai yang dimiliki oleh properti sekarang dan semua ini terjadi dalam mode async, adalah ide yang baik untuk menggunakan setState sebagai fungsi panggilan balik.

Saya telah mencoba menjelaskannya dalam codepen di sini KODE PENA