Cara Mengelola Status Secara Efisien di React

Jika Anda telah menulis banyak kode React, kemungkinan besar Anda telah salah menggunakan state. Satu kesalahan umum yang dilakukan oleh banyak pengembang React adalah menyimpan status secara global dalam aplikasi, alih-alih menyimpannya dalam komponen yang digunakan.

Pelajari bagaimana Anda dapat memperbaiki kode Anda untuk memanfaatkan keadaan lokal dan mengapa melakukannya selalu merupakan ide yang bagus.

Contoh Dasar State di React

Ini sangat aplikasi penghitung sederhana yang mencontohkan bagaimana keadaan biasanya ditangani di React:

impor {useState} dari'reaksi'
impor {Menangkal} dari'menangkal'
fungsiAplikasi(){
const [hitung, setCount] = useState(0)
kembali<Menangkalmenghitung={menghitung}setHitung={setCount} />
}
eksporbawaan Aplikasi

Pada baris 1 dan 2, Anda mengimpor file useState() kait untuk membuat negara, dan

Menangkal komponen. Anda mendefinisikan menghitung negara bagian dan setHitung metode untuk memperbarui status. Kemudian Anda meneruskan keduanya ke Menangkal komponen.

Itu Menangkal komponen kemudian membuat menghitung dan panggilan setHitung untuk menambah dan mengurangi hitungan.

fungsiMenangkal({hitung, setHitung}) {
kembali (


 set Hitung(sebelumnya => sebelumnya - 1)}>-</button>
{hitung}</span>
 set Hitung(sebelumnya => sebelumnya + 1)}>+</button>
 </div>
 )
}

Anda tidak mendefinisikan menghitung variabel dan setHitung berfungsi secara lokal di dalam Menangkal komponen. Sebaliknya, Anda meneruskannya dari komponen induk (Aplikasi). Dengan kata lain, Anda menggunakan keadaan global.

Masalah Dengan Negara Global

Masalah dengan menggunakan status global adalah Anda menyimpan status dalam komponen induk (atau induk dari induk) dan kemudian menyebarkannya sebagai alat peraga ke komponen di mana keadaan itu benar-benar dibutuhkan.

Terkadang hal ini tidak masalah jika Anda memiliki status yang digunakan bersama di banyak komponen. Namun dalam hal ini, tidak ada komponen lain yang peduli menghitung negara kecuali untuk Menangkal komponen. Oleh karena itu, lebih baik memindahkan negara bagian ke Menangkal komponen di mana itu benar-benar digunakan.

Memindahkan Negara Bagian ke Komponen Anak

Saat Anda memindahkan status ke Menangkal komponen, akan terlihat seperti ini:

impor {useState} dari'reaksi'
fungsiMenangkal() {
const [hitung, setCount] = useState(0)
kembali (


 set Hitung(sebelumnya => sebelumnya - 1)}>-</button>
{hitung}</span>
 set Hitung(sebelumnya => sebelumnya + 1)}>+</button>
 </div>
 )
}

Kemudian di dalam Anda Aplikasi komponen, Anda tidak perlu meneruskan apa pun ke Menangkal komponen:

// impor
fungsiAplikasi(){
kembali<Menangkal />
}

Penghitung akan bekerja persis sama seperti sebelumnya, tetapi perbedaan besarnya adalah bahwa semua negara bagian Anda berada di dalam ini secara lokal Menangkal komponen. Jadi jika Anda perlu memiliki penghitung lain di beranda, Anda akan memiliki dua penghitung independen. Setiap penghitung mandiri dan menangani semua statusnya sendiri.

Menangani Status dalam Aplikasi yang Lebih Kompleks

Situasi lain di mana Anda akan menggunakan keadaan global adalah dengan formulir. Itu Aplikasi komponen di bawah meneruskan data formulir (email dan kata sandi) dan metode penyetel ke bawah Formulir masuk komponen.

impor { status penggunaan } dari"reaksi";
impor { Formulir Masuk } dari"./LoginForm";
fungsiAplikasi() {
const [formData, setFormData] = useState({
 surel: "",
 kata sandi: "",
 });
fungsiupdateFormData(Data baru) {
 setFormData((sebelumnya) => {
kembali { ...prev, ...newData };
 });
 }
fungsionSubmit() {
menghibur.log (formData);
 }
kembali (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

Itu Formulir masuk komponen mengambil informasi login dan merendernya. Saat Anda mengirimkan formulir, itu memanggil perbaharui data fungsi yang juga diturunkan dari komponen induk.

fungsiFormulir masuk({ onSubmit, data, updateData }) {
fungsihandleSubmit(e) {
 e.preventDefault();
 onSubmit();
 }
kembali (


"surel">email</label>
 jenis="surel"
 id="surel"
 nilai={data.email}
 onChange={(e) => updateData({ surel: e.target.nilai })}
 />
"kata sandi">Kata Sandi</label>
 jenis="kata sandi"
 id="kata sandi"
 nilai={data.kata sandi}
 onChange={(e) => updateData({ kata sandi: e.target.nilai })}
 />
"kirim">Kirim</button>
 </form>
 );
}

Daripada mengelola status pada komponen induk, lebih baik memindahkan status ke LoginForm.js, di mana Anda akan menggunakan kode. Melakukannya membuat setiap komponen mandiri dan tidak bergantung pada komponen lain (yaitu induk) untuk data. Berikut adalah versi modifikasi dari Formulir masuk:

impor { gunakanRef } dari"reaksi";
fungsiFormulir masuk({ diKirim }) {
const emailRef = useRef();
const passwordRef = useRef();

fungsihandleSubmit(e) {
 e.preventDefault();
 onSubmit({
 email: emailRef.current.value,
 kata sandi: passwordRef.current.value,
 });
 }
kembali (


"surel">email</label>
"surel" id="surel" ref={emailRef} />
"kata sandi">Kata Sandi</label>
"kata sandi" id="kata sandi" ref={passwordRef} />
"kirim">Kirim</button>
 </form>
 );
}

Di sini Anda mengikat input ke variabel menggunakan ref atribut dan gunakanRef Bereaksi kait, daripada meneruskan metode pembaruan secara langsung. Ini membantu Anda menghapus kode verbose dan optimalkan performa form menggunakan hook useRef.

Di komponen induk (Aplikasi.js), Anda dapat menghapus status global dan updateFormData() metode karena Anda tidak lagi membutuhkannya. Satu-satunya fungsi yang tersisa adalah onSubmit(), yang Anda panggil dari dalam Formulir masuk komponen untuk mencatat detail login di konsol.

fungsiAplikasi() {
fungsionSubmit(formData) {
menghibur.log (formData);
 }
kembali (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

Anda tidak hanya membuat negara bagian Anda selokal mungkin, tetapi Anda benar-benar menghilangkan kebutuhan akan negara bagian mana pun (dan menggunakan referensi alih-alih). Jadi milikmu Aplikasi komponen menjadi jauh lebih sederhana (hanya memiliki satu fungsi).

Milikmu Formulir masuk komponen juga menjadi lebih sederhana karena Anda tidak perlu khawatir memperbarui status. Sebaliknya, Anda hanya melacak dua referensi, dan hanya itu.

Menangani Status Bersama

Ada satu masalah dengan pendekatan mencoba membuat negara bagian selokal mungkin. Anda sering mengalami skenario di mana komponen induk tidak menggunakan status, tetapi meneruskannya ke beberapa komponen.

Contohnya adalah memiliki a TodoContainer komponen induk dengan dua komponen anak: Daftar Todo Dan TodoCount.

fungsiTodoContainer() {
const [todos, setTodos] = useState([])
kembali (
 <>


 </>
 )
}

Kedua komponen anak ini membutuhkan todos negara, jadi TodoContainer menularkannya kepada keduanya. Dalam skenario seperti ini, Anda harus membuat negara bagian selokal mungkin. Dalam contoh di atas, meletakkannya di dalam TodosContainer adalah lokal seperti yang Anda bisa dapatkan.

Jika Anda menempatkan keadaan ini di Anda Aplikasi komponen, itu tidak akan selokal mungkin karena itu bukan induk terdekat dari dua komponen yang membutuhkan data.

Untuk aplikasi besar, kelola status hanya dengan useState() hook terbukti sulit. Dalam kasus seperti itu, Anda mungkin perlu memilih API Konteks Bereaksi atau Bereaksi Redux untuk mengelola negara secara efektif.

Pelajari Lebih Lanjut Tentang React Hooks

Kait membentuk dasar React. Dengan menggunakan hooks di React, Anda dapat menghindari penulisan kode panjang yang seharusnya menggunakan kelas. Hook useState() adalah hook React yang paling umum digunakan, tetapi masih banyak yang lain seperti useEffect(), useRef(), dan useContext().

Jika Anda ingin mahir dalam mengembangkan aplikasi dengan React, maka Anda perlu mengetahui cara menggunakan hook ini di aplikasi Anda.