Prop Drilling di React: Kelemahan dan Alternatif

Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Mengelola data dan membangun aplikasi yang kuat dan dapat dipelihara adalah keterampilan pengembangan perangkat lunak yang vital. Cara umum untuk memodulasi aplikasi React Anda adalah dengan menggunakan pengeboran prop, yang membantu meneruskan data ke pohon komponen.

Video MUO hari ini GULIR UNTUK LANJUTKAN DENGAN KONTEN

Namun, karena proyek menjadi lebih besar, pengeboran penyangga dapat memiliki kekurangan. Jelajahi masalah seputar pengeboran prop dan cari tahu alternatif apa yang tersedia.

Memahami Pengeboran Prop

Pengeboran penyangga adalah teknik yang melewatkan data ke pohon komponen sebagai penyangga, terlepas dari apakah komponen perantara membutuhkan data atau tidak.

layar hitam setelah pembaruan windows 10

Pengeboran melibatkan penerusan alat peraga dari induk ke komponen turunannya, dan lebih jauh ke bawah hierarki. Tujuan utamanya adalah mengaktifkan komponen di tingkat yang lebih rendah dari pohon untuk mengakses dan menggunakan data yang disediakan oleh komponen tingkat yang lebih tinggi.

Representasi diagram tentang cara kerja pengeboran penyangga

Kerugian Pengeboran Prop

Sementara pengeboran prop memecahkan masalah berbagi data, itu memperkenalkan beberapa kelemahan yang dapat menghambat pemeliharaan kode dan efisiensi pengembangan.

1. Peningkatan Kompleksitas

Seiring pertumbuhan aplikasi, pengeboran prop menjadi lebih sulit untuk dikelola. Hal ini dapat menyebabkan jaringan dependensi komponen yang kompleks, membuat kode sulit untuk dipahami dan diubah.

 import ChildComponent from './ChildComponent'; 
 
export default function ParentComponent = () => {  
  const data = 'Prop drilling!';  
  return ( <div> <ChildComponent data={data} /> </div> ); 
}; 
 
import GrandChildComponent from './GrandChildComponent';  
 
export default function ChildComponent = ({ data }) => { 
  return ( <div> <GrandChildComponent data={data} /> </div> ); 
}; 
 
import GreatGrandChildComponent from './GreatGrandChildComponent';  
 
export default function GrandChildComponent = ({ data }) => {  
  return ( <div> <GreatGrandChildComponent data={data} /> </div> ); 
}; 
 
export default function GreatGrandChildComponent = ({ data }) => {  
  return ( <div> <p>{data}</p> </div> ); 
};

Di sini, data dari ParentComponent tingkat teratas dipindahkan ke GreatGrandChildComponent melalui dua komponen perantara.

Saat hierarki komponen tumbuh lebih dalam, dan lebih banyak komponen bergantung pada penyangga, semakin sulit untuk melacak dan mengelola aliran data.

bagaimana memulihkan foto yang dihapus di ponsel

2. Kopling Ketat

Ini terjadi ketika komponen bergantung satu sama lain melalui props, membuatnya sulit untuk diubah atau digunakan kembali. Hal ini dapat mempersulit perubahan pada satu komponen tanpa memengaruhi komponen lainnya.

 import ChildComponentA from './ChildComponentA';  
import ChildComponentB from './ChildComponentB'; 
 
export default function ParentComponent = () => {  
  const sharedData = 'Shared data';  
 
 return (  
    <div> 
     <ChildComponentA data={sharedData} /> 
     <ChildComponentB data={sharedData} />  
    </div> 
 ); 
}; 
 
import GrandChildComponent from './GrandChildComponent';  
 
export default function ChildComponentA = ({ data }) => {  
  return ( 
   <div> 
     <p>Component A</p> 
     <GrandChildComponent data={data} />  
    </div> 
 ); 
}; 
 
import GrandChildComponent from './GrandChildComponent';  
 
export default function ChildComponentB = ({ data }) => {  
  return ( 
   <div> 
     <p>Component B</p> 
     <GrandChildComponent data={data} />  
    </div> 
 ); 
}; 
 
export default function GrandChildComponent = ({ data }) => {  
  return (  
    <div> <p>{data}</p> </div> 
 ); 
};

Di sini, kedua komponen anak menerima data yang sama dari komponen induknya dan meneruskannya ke GrandChildComponent.

Jika data diperbarui, semua komponen dalam hierarki juga perlu diperbarui, meskipun beberapa komponen tidak menggunakan data tersebut. Ini bisa jadi sulit dan memakan waktu, dan juga meningkatkan risiko masuknya bug.

3. Pemeliharaan Kode

Pengeboran penyangga adalah masalah pemeliharaan kode karena komponen baru memerlukan akses ke penyangga yang melewati hierarki. Ini dapat menyebabkan bug jika Anda perlu memodifikasi banyak komponen, dan ketidakkonsistenan jika alat peraga berubah.

 import ChildComponent from './ChildComponent';  
 
export default function ParentComponent = () => {  
  const [count, setCount] = useState(0);  
 
  const incrementCount = () => { 
    setCount(count + 1); 
  }; 
 
  return (  
    <div> 
     <ChildComponent count={count} incrementCount={incrementCount} />  
    </div> 
 ); 
}; 
 
import GrandChildComponent from './GrandChildComponent';  
 
export default function ChildComponent = ({ count, incrementCount }) => {  
  return (  
    <div>  
      <button onClick={incrementCount}>Increment</button>  
      <GrandChildComponent count={count} />  
    </div> 
 ); 
}; 
 
export default function GrandChildComponent = ({ count }) => {  
  return (  
    <div> 
      <p>Count: {count}</p> 
   </div> 
 ); 
};

Di sini ParentComponent meneruskan nilai hitung sebagai penyangga ke ChildComponent dan kemudian ke GrandChildComponent.

Namun, jika jumlah berubah atau jika ada aturan baru untuk meneruskan properti tambahan, Anda harus memperbarui setiap komponen dalam hierarki yang menggunakan properti tersebut. Proses ini rawan kesalahan, mempersulit pemeliharaan kode dan meningkatkan ketidakkonsistenan atau kesalahan.

Menjelajahi Alternatif Pengeboran Prop

Ada banyak solusi manajemen keadaan dalam ekosistem React yang dapat Anda gunakan untuk mengatasi kelemahan prop drilling.

Konteks reaksi

React Context adalah fitur yang memungkinkan pembagian status di seluruh komponen tanpa melewati props. Ini menyediakan penyimpanan terpusat yang dapat diakses komponen dengan kait useContext . Ini dapat meningkatkan kinerja dan membuatnya lebih mudah untuk mengelola keadaan.

Bagan alur yang menunjukkan React Context menyediakan data ke semua komponen dalam aplikasi

Redux

Redux adalah perpustakaan manajemen negara yang menyediakan satu toko negara global. Komponen dapat mengakses dan memperbarui status melalui tindakan dan reduksi. Ini dapat membantu menjaga kode Anda tetap teratur dan dapat mempermudah debug.

cara mengaktifkan tombol angka di keyboard windows 10

Bagan alur yang menunjukkan Redux menyediakan data ke semua komponen dalam aplikasi

MobX

MobX adalah perpustakaan manajemen negara yang menggunakan data yang dapat diamati. Ini berarti bahwa komponen dapat berlangganan perubahan di negara bagian dan bertindak sebagai tanggapan. Pustaka dapat membuat kode Anda lebih reaktif dan dapat meningkatkan kinerja.

Sesuatu

Jotai adalah perpustakaan manajemen negara bagian untuk React , yang menggunakan model keadaan atom. Ini memungkinkan Anda untuk membuat atom status yang dapat diakses dan diperbarui oleh komponen.

Dengan Jotai, Anda dapat mengurangi kebutuhan akan pengeboran penyangga dan mencapai pendekatan manajemen keadaan yang lebih ramping dan efisien. Desainnya yang minimalis dan fokus pada kinerja membuatnya menjadi pilihan yang menarik untuk mengelola status dalam aplikasi React.

Diagram alur yang menunjukkan beberapa konsep dan tindakan Jotai dan bagaimana mereka terhubung satu sama lain

Menguasai Komunikasi Komponen: Memperluas Toolbox Anda Lebih dari Pengeboran Prop

Pengeboran prop adalah teknik untuk meneruskan data dari komponen induk ke komponen anak. Ini efektif untuk berbagi data, tetapi memiliki beberapa kekurangan yang dapat membuat kode sulit dipelihara dan dikembangkan.

Untuk mengatasi kelemahan tersebut, Anda dapat menggunakan alternatif seperti React Context, Redux, dan MobX. Solusi ini memberikan cara yang lebih terpusat untuk mengelola data, yang dapat membuat kode lebih dapat dipelihara dan diskalakan.