Cara Menggunakan Tombol React untuk Menghindari Konflik Komponen
Table of content:
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.
Baca Juga:
Komponen Bereaksi Tidak Selalu Independen
Sintaksnya yang langsung adalah salah satu alasan utama Anda harus mempelajari React. 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"export function Counter({name}) {
const [count, setCount] = useState(0)
return(
<div>
<div>{name}</div>
<button onClick={() => setCount(c => c - 1)}> - </button>
<br />
<button onClick={() => setCount(c => c + 1)}> + </button>
</div>
)
}
Ini Menangkal komponen menerima a nama dari induk melalui penghancuran objek, yang merupakan cara untuk menggunakan props di React. 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"export default function App() {
const [isKingsley, setIsKingsley] = useState(true)
return(
<div>
{ isKingsley ? <Counter name="Kingsley" /> : <Counter name="Sally" /> }
<br />
<button onClick={() => 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 dari 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 memahami apa itu DOM. Misalnya, Anda dapat membungkus penghitung pertama di dalam a
elemen dan yang kedua di dalam a
import { useState } from "react"
import { Counter } from "./Counter"export default function App() {
const [isKingsley, setIsKingsley] = useState(true)
return (
<div>
{ isKingsley ?
(<div>
<Counter name="Kingsley" />
</div>)
:
(<section>
<Counter name="Sally" />
</section>)
}
<br />
<button onClick={() => setIsKingsley(k => !k)}> Swap </button>
</div>
)
}
Jika Anda menaikkan penghitung “Kingsley” dan klik Menukarstatus disetel ulang ke 0. Sekali lagi, ini terjadi karena struktur kedua pohon DOM berbeda.
Ketika adalahKingsley variabel adalah BENARstruktur 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"export default function App() {
const [isKingsley, setIsKingsley] = useState(true)
return(
<div>
{ isKingsley ?
<Counter key="Kingsley" name="Kingsley" /> :
<Counter key="Sally" name="Sally" />
}
<br />
<button onClick={() => setIsKingsley(k => !k)}> Swap </button>
</div>
)
}
Sekarang, saat Anda menaikkan penghitung “Kingsley” dan klik MenukarReact 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.
export default function App() {
const names = ["Kingsley", "John", "Ahmed"] return(
<div>
{ names.map((name, index) => {
return <Counter key={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"export default function App() {
const [isKingsley, setIsKingsley] = useState(true)
return(
<div>
{ isKingsley ? <div>Kingsley's Score</div> : <div>Sally's score</div> }
<input key={ isKingsley? "Kingsley" : "Sally" } type="number"/>
<br />
<button onClick={() => 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.
Artikel Terkait
