Why You Need the React Key Prop

Anda melihat ralat ini dalam konsol anda: "Each child in a list should have a unique 'key' prop."

Ramai pembangun mengabaikannya. Ini adalah satu kesilapan. Amaran ini memberitahu anda tentang isu prestasi dan potensi pepijat (bugs).

What is a key prop? Ia membantu React mengenal pasti item tertentu dalam sesuatu senarai. Ia memberitahu React item mana yang berubah, beralih, atau dibuang. Tanpa key, React akan melakukan render semula (re-render) keseluruhan senarai setiap kali terdapat perubahan. Ini akan melambatkan aplikasi anda.

Bayangkan sebuah perpustakaan dengan 1000 buah buku. Jika anda menambah buku baharu di tengah-tengah, anda perlu mengalihkan setiap buku lain untuk memberi ruang. Key bertindak seperti ID unik bagi setiap buku. Ia membolehkan React mencari kedudukan tepat tanpa perlu mengalihkan semua perkara lain.

The Reconciliation Process React menggunakan algoritma perbezaan (diffing algorithm) untuk membandingkan Virtual DOM baharu dengan yang lama.

  • Perubahan state.
  • React membina pokok (tree) baharu.
  • React membandingkan pokok menggunakan key.
  • React hanya mengemas kini elemen yang berubah.

The common mistake: Using array index as a key. Jangan sesekali gunakan key={index} jika senarai anda berubah. Jika anda menambah atau memadam item, indeks setiap item akan beralih. React akan menjadi keliru dan melakukan render semula pada item yang sebenarnya tidak berubah. Ini membazirkan memori dan menyebabkan pepijat UI.

How to fix it:

  • Gunakan ID yang stabil daripada pangkalan data anda (seperti user.id).
  • Gunakan string unik seperti uuid jika data anda tidak mempunyai ID.
  • Elakkan Math.random() untuk key. Ia mencipta ID baharu pada setiap render, yang memaksa komponen untuk dipasang semula (re-mount) dan menyebabkan UI berkelip (flickering).

Best practices:

  • Key mestilah stabil.
  • Key mestilah unik dalam kalangan adik-beradik (siblings).
  • Gunakan ID pangkalan data untuk prestasi terbaik.

Key Comparison Table: • Database ID: Disyorkan. Stabil dan pantas. • Array Index: Tidak disyorkan. Menyebabkan pepijat semasa penyusunan (sorting) atau penapisan (filtering). • Math.random(): Elakkan. Menyebabkan pemasangan semula (re-mount) yang tidak perlu.

Summary for your workflow: Jika anda melihat ralat tersebut, komponen anda kekurangan pengenal pasti yang kekal. Semak respons API anda untuk medan unik seperti e-mel atau ID. Perbaiki ini untuk menjimatkan 30-40% render semula yang tidak perlu.

Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-key-prop-kyun-zaroori-hai-warning-solve-in-hindi-49dk