Lifting State Up: Bagaimana Reaksi Komponen Anak Berkomunikasi Dengan Orang Tua

React menggunakan aliran data satu arah dari orang tua ke anak, tidak pernah dari anak ke orang tua. Namun apa jadinya jika seorang anak perlu berkomunikasi dengan orang tuanya?

Pelajari cara mengangkat status untuk mengizinkan komponen anak mengirim data ke komponen induk.

Komponen dalam React

React mengatur komponen dalam hierarki di mana komponen anak bersarang di dalam komponen induk. Hirarki ini membentuk blok penyusun antarmuka pengguna aplikasi.

</ParentComponent>

Setiap komponen anak menerima data, yang dikenal sebagai props, dari komponen induknya. Props React dapat menampung berbagai tipe data seperti array, objek, string, atau bahkan fungsi. Komponen anak tidak dapat memanipulasi data ini secara langsung.

Perhatikan komponen berikut yang disebut Tombol Penghitung:

const CounterButton = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count + 1)
 }
return (
Increment</button>
 )
}

Komponen mempertahankan nilai status bernama menghitung yang meningkat setiap kali pengguna mengklik tombol.

Misalkan Anda menyarangkan komponen CounterButton ke dalam komponen lain yang bernama Beranda:

const Home = () => {
return (

 )
}

Jika Anda ingin menampilkan nilai hitungan dari Tombol Penghitung komponen di dalam komponen Beranda, Anda akan menghadapi tantangan.

Seperti disebutkan, React menerapkan aliran data searah dari induk ke anak. Oleh karena itu, komponen CounterButton tidak dapat secara langsung berbagi nilai status hitungan dengan komponen Home.

Untuk menyiasatinya, Anda perlu mengangkat keadaan.

Cara Meningkatkan Status untuk Berbagi Data Antar Komponen

Status pengangkatan mengacu pada pemindahan status komponen ke tingkat yang lebih tinggi pada pohon komponen, ke komponen induk. Setelah Anda mengangkat statusnya, Anda dapat meneruskannya ke komponen turunan sebagai nilai prop.

Dalam contoh penghitung sebelumnya, Anda perlu memindahkan status penghitungan dan menangani Kenaikan berfungsi ke komponen Home. Anda kemudian harus meneruskan fungsi handleIncrement ke komponen CounterButton sebagai prop.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (

{count}</p>
 )
}

Selanjutnya, Anda perlu memodifikasi komponen CounterButton untuk menerima fungsi handleIncrement dan memanggilnya ketika pengguna mengklik tombol.

const CounterButton = ({handleIncrement}) => {
return (
Increment</button>
 )
}

Mengangkat negara memusatkan data dan mengalihkan tanggung jawab mengelola negara dari anak ke orang tua.

Selain membantu Anda menampilkan data di komponen induk, mengangkat status dapat membantu Anda menyinkronkan data di beberapa komponen.

Misalkan, Anda memiliki komponen Header dan Footer yang bersarang di dalam komponen induk dan masing-masing komponen ini juga menampilkan jumlah bersama. Untuk membagikan nilai ini, Anda dapat meneruskannya ke komponen ini sebagai props.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (



 )
}

Namun, Anda harus berhati-hati dalam mengangkat keadaan agar tidak berakhir dalam situasi yang disebut pengeboran penyangga.

Tantangan Pengeboran Prop

Seiring berkembangnya aplikasi Anda, Anda mungkin menemukan bahwa beberapa komponen yang lebih dalam di pohon komponen memerlukan akses ke status bersama. Agar status bersama ini tersedia bagi komponen yang disarangkan, Anda harus meneruskan props melalui komponen perantara. Proses ini dapat menyebabkan pengeboran penyangga.

Pengeboran penyangga mempersulit pelacakan aliran data dan dapat menyebabkan kode sulit dipelihara.

Untuk memitigasi pengeboran penyangga namun tetap berbagi data dari seluruh komponen, pertimbangkan untuk menggunakan konteks React. Konteks React memungkinkan Anda memusatkan status sehingga tersedia di seluruh aplikasi.

Berbagi Data Di React Menggunakan Props

Saat Anda perlu berbagi data dari komponen anak dengan komponen induknya, naikkan status ke komponen induk, lalu teruskan fungsi yang memperbarui status ke komponen anak sebagai props.

Jika komponen anak sangat bersarang di pohon komponen, gunakan alat manajemen status seperti React Context atau alat pihak ketiga seperti React Redux untuk mencegah pengeboran prop.