Kait useState – Panduan komprehensif

Apa itu negara?

Sebelum kita menyelam jauh ke dalam kait useState, mari kita pahami istilahnya terlebih dahulu negara.

State mewakili informasi tentang sesuatu pada titik waktu tertentu.

Sebagai contoh, mari kita pertimbangkan sebuah kotak teks.

Awalnya, tidak ada apa-apa di dalam kotak teks ini, jadi statusnya adalah kosong. Misalkan Anda mulai mengetik Hello di dalamnya, untuk setiap penekanan tombol, status kotak teks akan berubah. Pada awalnya akan menjadi "H", lalu "Dia", lalu "Hel" dan seterusnya hingga menjadi "Halo".

Juga, perhatikan bahwa saat Anda mengetik, Anda tidak kehilangan nilai sebelumnya. Jika Anda menekan "H" diikuti oleh "e", Anda mendapatkan "Dia" dan bukan hanya "e". Dengan kata lain Anda dapat menganggap negara sebagai ingatan dari kotak teks.

Kebutuhan akan state dalam komponen React.

Mari kita pahami ini dengan bantuan sebuah contoh.

Codesanbox tanpa status

Di sini kita memiliki Penghitung Klik komponen yang menampilkan berapa kali tombol Kenaikan diklik.

Kami menggunakan a variabel lokal "penghitung" untuk menjaga jumlah klik.

Setiap kali kita mengklik tombol Increment, menanganiKlik fungsi akan dipanggil. Fungsi ini akan meningkatkan nilai penghitung sebesar 1 dan juga mencatat nilai di konsol.

Silakan, klik tombol Increment di pratinjau CodeSandbox.

Tidak ada yang terjadi?

Nah logika kita sepertinya benar. Nilai yang dicatat di konsol (CodeSandbox) diperbarui dengan benar setiap kali kita mengklik, tetapi mengapa pembaruan ini tidak tercermin di UI?

Itu karena cara React bekerja.

• Perubahan pada variabel lokal tidak memicu rendering ulang.
• Selama rendering ulang, komponen dibuat dari awal yaitu fungsi komponen (dalam contoh ini adalah fungsi ClickCounter) dijalankan sekali lagi. Karena variabel (misalnya, penghitung) bersifat lokal untuk fungsi, nilai sebelumnya akan hilang.

Jadi bagaimana kita membuat komponen mengingat nilai di antara render?

Ya, kamu benar tentang itu! Kami melakukan ini dengan bantuan gunakanNegara menghubungkan.

Kait useState

Kait useState menyediakan mekanisme untuk mempertahankan status dan memicu rendering ulang.

Mari kita lihat penggunaannya.

import React, { useState } from "react";
const state = useState(initialValue);

// OR

const state = React.useState(initialValue);

Kait useState mengembalikan array yang berisi dua item:

• A variabel keadaan yang mempertahankan nilainya selama rendering ulang. Nilai awal yang diteruskan ke useState ditetapkan ke variabel status selama render pertama.
• A fungsi penyetel yang memperbarui variabel status dan juga memicu rendering ulang.

const state = useState(0);
const data = state[0];
const setData = state[1];

Menggunakan de-strukturisasi array , kita dapat memfaktorkan ulang pernyataan di atas menjadi satu pernyataan, seperti yang ditunjukkan di bawah ini:

const [data, setData] = useState(0);

Nilai awal yang diteruskan ke useState hanya digunakan selama render pertama. Untuk re-render, diabaikan.

Kontra dengan useState

Sekarang, mari perbarui contoh penghitung sebelumnya untuk menyertakan kait useState.

• Karena kita membutuhkan nilai penghitung antara re-render, mari kita ubah menjadi keadaan.

const [counter, setCounter] = useState(0);

• Memanggil setCounter di dalam fungsi handleClick.

const handleClick = () => {
  setCounter(counter + 1);
  console.log(`%c Counter:${counter}`, "color:green");
};

Fungsi setCounter akan memperbarui nilai penghitung sebesar 1 dan memicu rendering ulang. Ketika fungsi komponen dipanggil pada rendering ulang, variabel status yang dikembalikan oleh useState akan memiliki nilai yang diperbarui.

Cobalah CodeSandbox dengan kode yang diperbarui. Klik tombol Increment dan lihat keajaiban useState beraksi.

Codesanbox dengan useState

Anda dapat memverifikasi bahwa pada render ulang, komponen fungsional Penghitung Klik dipanggil lagi dengan melihat log konsol. Log “ClickCounter start” yang ditambahkan di awal komponen akan dicatat pada setiap render.

Fungsi pembaruan

Misalkan kita ingin meningkatkan nilai counter sebesar 4 pada setiap klik.

const handleClick = () => {
  setCounter(counter + 1);
    setCounter(counter + 1);
    setCounter(counter + 1);
    setCounter(counter + 1);
    console.log(`%c Counter:${counter}`, "color:green");
    };

Asumsikan bahwa nilai awal penghitung adalah 0. Apa yang Anda harapkan untuk dilihat setelah tombol diklik?

Tanpa fungsi pembaru

Anda mengharapkan hitungannya menjadi 4 kan? Tapi mengapa Anda melihat 1 saja?

a) Setiap render diasosiasikan dengan sebuah state. Nilai status tersebut tetap terkunci selama masa render tersebut.

Perhatikan bahwa log di dalam fungsi handleClick mencetak nilai penghitung sebagai 0.

Tidak peduli berapa kali Anda memanggil metode setCounter, nilai penghitung tetap sama.

const handleClick = () => {
  setCounter(counter + 1);
    setCounter(counter + 1);
    setCounter(counter + 1);
    setCounter(counter + 1);
    console.log(`%c Counter:${counter}`, "color:green");
    };

b) Sampai semua kode di dalam event handler dieksekusi, React tidak akan memicu rendering ulang.

Karena alasan ini, setiap panggilan setCounter tidak memicu render individual. Sebaliknya React menambahkan fungsi setter ini dalam antrian. Mengeksekusinya sesuai urutan antriannya. Pembaruan yang dilakukan pada status setelah menjalankan semua pernyataan direfleksikan dalam render berikutnya. Antrian beberapa pembaruan status ini dikenal sebagai pengelompokan. Hal ini memungkinkan React menjadi lebih berkinerja.

Oleh karena itu, di sini kita mendapatkan satu render, bukan 4 render yang berbeda.

Contoh ini sederhana dan Anda dapat memperbaiki masalah ini dengan memperbarui kode seperti yang ditunjukkan di bawah ini:

const handleClick = () => {
setCounter(counter + 4);
    console.log(`%c Counter:${counter}`, "color:green");
    };

Tetapi bagaimana jika Anda memiliki kasus penggunaan di mana Anda ingin memperbarui status beberapa kali sebelum render berikutnya.

Di situlah _ pembaru _ fungsi berguna.

Kita dapat memfaktorkan ulang contoh sebelumnya dengan fungsi updater sebagai berikut:

const handleClick = () => {
  setCounter(prevCounter => prevCounter + 1);
    setCounter(prevCounter => prevCounter + 1);
    setCounter(prevCounter => prevCounter + 1);
    setCounter(prevCounter => prevCounter + 1);
    console.log(`%c Counter:${counter}`, "color:green");
    };

Sini prevCounter prevCounter + 1 mewakili fungsi updater.

Seperti yang dijelaskan sebelumnya, pernyataan pembaru ini juga diantrekan (batching).

Fungsi updater menerima status tertunda/sebelumnya yang digunakan untuk menghitung status berikutnya.

Di bawah ini adalah CodeSandbox dengan fungsi updater ditambahkan. Coba klik tombol kenaikan.

Kotak pasir fungsi pembaruan

Fungsi penginisialisasi

Lihatlah contoh di bawah ini. Di sini kita memanggil fungsi getItems untuk mendapatkan nilai awal status.

import React from "react";
import { useState } from "react";
function ListItems() { 
  const getItems = () => { 
    console.log(`%c getItems called`, "color:hotpink");
    	return Array(50).fill(0); 
    }; 
  const [items, setItems] = useState(getItems()); 
    
    return ( 
    	<div className="card">
        <ul> {items.map((item, index) => 
        	( <li key={index}>Item {index + 1}		</li>))} 
        </ul> <button onClick={() => setItems([...items, 0])}>Add Item</button> 	</div> );
} 
export default ListItems;

Fungsi ini membuat array dengan ukuran 50 dan mengisi array dengan nol. Lihat gambar di bawah ini.

Item ini kemudian ditampilkan di layar.

Semuanya tampak baik-baik saja tetapi kami memiliki masalah di sini.

Klik pada Tambahkan Barang tombol (terletak setelah daftar item) untuk menambahkan item baru ke daftar. Perhatikan log.

Tanpa fungsi penginisialisasi

Apakah Anda melihat masalahnya di sini?

Log "getItems disebut" akan ditambahkan ke konsol setiap kali Anda menambahkan item. Ini berarti bahwa fungsi ini dipanggil pada setiap render.

Ingat bahwa useState mengabaikan nilai awal yang diteruskan ke sana setelah render pertama, tetapi di sini nilai awal masih dihitung ulang. Ini bisa mahal jika kita membuat array besar atau melakukan perhitungan berat.

Kita bisa menyelesaikan masalah ini dengan melewati dapatkanItem sebagai _ penginisialisasi _ fungsi.

Sekarang, mari kita buat sedikit perubahan pada kodenya.

const [items, setItems] = useState(getItems);

Dengan fungsi penginisialisasi

Lihat jendela konsol di CodeSandbox. Perhatikan bahwa log "getItems disebut" hanya dicetak pada render pertama. Ketika item berikutnya ditambahkan, log ini tidak ada.

Meskipun tidak ada perbedaan visual antara kedua contoh, dalam hal kinerja mereka berbeda.

Ingat ketika Anda membutuhkan fungsi untuk keadaan awal, selalu lewati fungsi atau panggil fungsi di dalam fungsi lain. Jangan pernah memanggil fungsi secara langsung.

✅ const [items, setItems] = useState(getItems);
✅ const [items, setItems] = useState(() => getItems());
❌ const [items, setItems] = useState(getItems());

Berapa banyak kait useState yang dapat saya miliki

Anda dapat memiliki kait useState sebanyak yang diperlukan di dalam komponen.

Lihat CodeSandbox

Kait negara penggunaan ganda

Komponen di bawah ini memiliki tiga status berbeda – nama pengguna, kata sandi, keepMeSignedIn.

Coba perbarui nilai nama pengguna, keepMeSignedIn. Status yang diperbarui dicatat di konsol saat tombol masuk diklik.

Highlight

• useState menyediakan mekanisme untuk memicu rendering ulang dan mempertahankan status di antara rendering ulang.
• Gunakan fungsi updater saat Anda perlu:
  • Hitung keadaan berikutnya berdasarkan keadaan sebelumnya.
  • Lakukan beberapa pembaruan ke status sebelum render berikutnya.
• Jika keadaan awal diperoleh dari suatu fungsi – gunakan sintaks fungsi penginisialisasi.
• Mungkin ada beberapa kait useState di dalam suatu komponen.

Menyukai postingan ini? Bagikan dengan orang lain.
Awalnya ditulis untuk blog pribadi saya – https://gauravsen.com/use-state-hook