Cara Menggunakan Tombol React untuk Menghindari Konflik Komponen

Pendekatan Bereaksi bisa sangat rumit, dan Anda mungkin menemukan perilaku tak terduga atau bahkan bug halus. Menyingkirkan bug semacam itu bisa sangat sulit jika Anda tidak terbiasa dengan penyebabnya.

Bug tertentu muncul saat Anda membuat komponen yang sama dengan properti berbeda secara kondisional. Jelajahi bug ini secara mendetail dan cari tahu cara menggunakan kunci React untuk mengatasinya.

Komponen Bereaksi Tidak Selalu Independen

Sintaksnya yang langsung adalah salah satu alasan utama Anda harus belajar Bereaksi. Namun, meski memiliki banyak kelebihan, framework ini bukannya tanpa bug.

Bug yang akan Anda pelajari di sini terjadi saat Anda merender komponen yang sama secara kondisional, tetapi meneruskannya dengan props yang berbeda.

Dalam kasus seperti ini, React akan berasumsi bahwa kedua komponen itu sama, sehingga tidak perlu merender komponen kedua. Akibatnya, status apa pun yang Anda tetapkan di komponen pertama akan tetap ada di antara perenderan.

Untuk menunjukkan, ambil contoh ini. Pertama, Anda memiliki yang berikut ini Menangkal komponen:

import { useState, useEffect } from"react"
exportfunctionCounter({name}) {
const [count, setCount] = useState(0)
return(


{name}</div>
 setCount(c => c - 1)}> - </button>


 setCount(c => c + 1)}> + </button>
 </div>
 )
}

Ini Menangkal komponen menerima a nama dari induk melalui penghancuran objek, yang merupakan cara untuk gunakan alat peraga di Bereaksi. Kemudian itu membuat nama dalam a. Itu juga mengembalikan dua tombol: satu untuk mengurangi menghitung di negara bagian dan yang lainnya untuk menaikkannya.

Perlu diingat bahwa tidak ada yang salah dengan kode di atas. Bug berasal dari blok kode berikut (komponen Aplikasi), yang menggunakan penghitung:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? <Countername="Kingsley" />: <Countername="Sally" /> }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Secara default, kode di atas membuat penghitung bernama Kingsley. Jika Anda menambah penghitung menjadi lima dan klik Menukar tombol, itu akan membuat penghitung kedua bernama Sally.

Tetapi masalahnya adalah penghitung tidak akan diatur ulang ke keadaan default nol setelah Anda menukarnya.

Bug ini terjadi karena kedua status merender elemen yang sama dalam urutan yang sama. React tidak mengetahui bahwa penghitung "Kingsley" berbeda dengan penghitung "Sally". Satu-satunya perbedaan adalah di nama prop tetapi, sayangnya, React tidak menggunakannya untuk membedakan elemen.

Anda dapat mengatasi masalah ini dengan dua cara. Yang pertama adalah dengan mengubah DOM Anda dan membuat kedua pohon berbeda. Ini mengharuskan Anda untuk mengerti apa itu DOM. Misalnya, Anda dapat membungkus penghitung pertama di dalam a elemen dan yang kedua di dalam a elemen:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return (


 { isKingsley? 
 (<div>
"Kingsley" /> 
 </div>)
: 
 (<section>
"Sally" /> 
 </section>)
 }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Jika Anda menaikkan penghitung "Kingsley" dan klik Menukar, status disetel ulang ke 0. Sekali lagi, ini terjadi karena struktur kedua pohon DOM berbeda.

Ketika adalahKingsley variabel adalah BENAR, struktur akan div >div > Menangkal (div yang berisi div, berisi Penghitung). Saat Anda menukar status penghitung menggunakan tombol, strukturnya menjadi div > bagian > Menangkal. Karena perbedaan ini, React akan secara otomatis membuat Penghitung baru dengan status reset.

Anda mungkin tidak selalu ingin mengubah struktur markup Anda seperti ini. Cara kedua untuk mengatasi bug ini menghindari kebutuhan akan markup yang berbeda.

Menggunakan Kunci untuk Merender Komponen Baru

Kunci memungkinkan React untuk membedakan antar elemen selama proses render. Jadi jika Anda memiliki dua elemen yang persis sama, dan Anda ingin memberi sinyal kepada React bahwa yang satu berbeda dari yang lain, Anda perlu menyetel atribut kunci unik pada setiap elemen.

Tambahkan kunci ke setiap penghitung, seperti ini:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? 
"Kingsley" name="Kingsley" />: 
"Sally" name="Sally" /> 
 }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Sekarang, saat Anda menaikkan penghitung "Kingsley" dan klik Menukar, React merender penghitung baru dan menyetel ulang status ke nol.

Anda juga harus menggunakan kunci saat merender array item dengan tipe yang sama, karena React tidak akan mengetahui perbedaan antara setiap item.

exportdefaultfunctionApp() {
const names = ["Kingsley", "John", "Ahmed"]
return(


 { names.map((name, index) => {
return<Counterkey={index}name={name} />
 })}
 </div>
 )
}

Saat Anda menetapkan kunci, React akan mengaitkan penghitung terpisah dengan setiap item. Dengan begitu, itu bisa mencerminkan setiap perubahan yang Anda buat pada array.

Kasus Penggunaan Kunci Tingkat Lanjut lainnya

Anda juga dapat menggunakan kunci untuk mengaitkan elemen dengan elemen lain. Misalnya, Anda mungkin ingin mengasosiasikan elemen masukan dengan elemen berbeda tergantung pada nilai variabel keadaan.

Untuk mendemonstrasikan, atur komponen Aplikasi:

import { useState } from"react"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? <div>Kingsley's Scorediv>: <div>Sally's scorediv> }
"Kingsley": "Sally" } type="number"/>


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Sekarang, setiap kali Anda bertukar antara elemen untuk Kingsley dan Sally, Anda secara otomatis mengubah atribut kunci input Anda antara "Kingsley" dan "Sally". Ini akan memaksa React untuk sepenuhnya me-render ulang elemen input dengan setiap klik tombol.

Lebih Banyak Tips untuk Mengoptimalkan Aplikasi React

Pengoptimalan kode adalah kunci untuk menciptakan pengalaman pengguna yang menyenangkan di web atau aplikasi seluler Anda. Mengetahui tentang berbagai teknik pengoptimalan dapat membantu Anda mendapatkan hasil maksimal dari aplikasi React Anda.

Bagian terbaiknya adalah Anda juga dapat menerapkan sebagian besar teknik pengoptimalan ini dengan aplikasi React Native.