lifelong learner — urip iku urup, currently working on accenture.

React – keys : sesuatu yang tak terlihat dibelakang layar

0
Degananda.com -

Keys dsecara harfiah berarti kunci. Keys pada react digunakan sebagai identifier. Keys sangat memiliki hubungan erat dengan list. Setiap list dapat dikenali oleh react sebagai element yang unik dengan bantuan Keys. Simak demonstrasi mengenai keys pada ulasan ini.

List

Untuk membuat list pada react kita dapat memanfaatkan fungsi .map() pada suatu array / object. Fungsi map itu akan menginterasi setiap nilai / anggota dari array. Contohnya kita memiliki array [1,2,3,4,5,6,7] kita dapat memanfaatkan fungsi map() untuk membuat list

constructor(props){
 super(props);

// bind kedua handler agar dapat menggunakan this
 this.onSubmit = this.onSubmit.bind(this);
 this.handleChange = this.handleChange.bind(this);

this.state = {
 // form value boject
 name : '',
 alamat : ''
 }
}

handleChange(event){
 this.setState({
 [event.target.name] : event.target.value
 });
}

onSubmit(event){
 event.preventDefault();
 console.log(this.state);
 // clear input
 ReactDOM.findDOMNode(this.refs.refAlamat).value = '';
 ReactDOM.findDOMNode(this.refs.refName).value = '';
}

cobaList(){
 const nomor = [1,2,3,4,5,6,7];
 return nomor.map(
 (value) => <li>{value}</li>
 )
}

render() {
 return (
 <div>
 <ul>
 {this.cobaList()}
 </ul>
 <div>
 <form onSubmit={this.onSubmit}>
 <p>
 <label> nama </label>
 <input type="text" value={this.state.name} ref="refName" name="name" onChange={this.handleChange} />
 </p>
 <p>
 <label> alamat </label>
 <input type="text" value={this.state.alamat} ref="refAlamat" name="alamat" onChange={this.handleChange} />
 </p>
 <p>
 <input type="submit" onClick={this.onButtonClick} value="submit" />
 </p>
 </form>
 </div>
 </div>
 );
}

hasil dari kode diatas dalah

Sekilas  tidak ada yang aneh dari list diatas yang tanpa mengimplementasikan keys. Lalu bagaimana jika pada saat form tersebut disubmit akan mengganti salah satu nilai dari list tersebut. Kita akan mencobannya. Namun terlebih dahulu konstanta tersebut harus kita letakan pada state component sehingga nantinnya dapat dilakukan perubahan melalui form.

cobaList(){
 return this.state.nomor.map(
 (value) => <li>{value}</li>
 )
}

selanjutnya kita akan merubah index ke 0 dan ke 6 menjadi “99” saat form tersebut disubmit dan melihat apa yang akan terjadi dengan list tersebut. Kode untuk mengubah state yang menyimpan array nomor tersebut yakni

// change state array
setTimeout(
 () => {
 this.setState(
 {
 nomor : [99,2,3,4,5,6,99]
 }
 )
 }, 3000
)

jika form disubmit maka yang terjadi adalah terjadi perubahan pada DOM pada li dengan nilai index “0” ataupun “6”.

perubahan diatas tidak terjadi di virtual dom milik react melainkan langsung pada dom. Hal ini menyebabkan performa aplikasi kurang baik karena kita tidak memberikan key pada suatu list. Sekarang bandingkan saat kita memberikan attribute key pada list tersebut.

cobaList(){
 return this.state.nomor.map(
 (value,i) => <li key={i}>dega {value}</li>
 )
}

hasilnya saat kita submit (untuk mengubah nilai state sehingga list mengalami perubahan).

Kesimpulan

Sekilas (SECARA KASAT MATA) pada saat kita menginspect element semuannya terlihat sama. Namun sesungguhnya mekanisme yang dilakukan dalam mengubah DOM sangatlah berbeda antara kasus menggunakan key dan tidak. Ketika menggunakan key react dapat mengetahui elemen mana yang berubah karena setiap elemen di list tersebut diberikan suatu identifier. Tanpa key react tidak dapat mengenali keunikan elemen sehingga perubahan pada dom tidak dapat dilakukan secara parsial sehingga performa mejadi buruk. Itulah mengapa pentingnya menggunakan key pada saat membuat list.