Inilah Mengapa Anda Tidak Harus Melewati Props untuk useState Hook Anda.

Kesenjangan Antara Komponen Induk dan Komponen Anak

Inilah pola sebenarnya yang membuat semua orang terjebak. Anda mengambil prop — seperti nama awal pengguna — dan membuangnya langsung ke variabel status lokal:

import React, { useState } from 'react';
// The parent passes down the fresh data it fetched
function EditProfile({ initialName }) {
// You mirror it into local state so you can control the input
const [name, setName] = useState(initialName);
return (
<input 
value={name} 
onChange={(e) => setName(e.target.value)} 
/>
);
}

Logikanya masuk akal di kepala Anda: Anda perlu mengedit namanya, jadi nama itu harus tetap dalam keadaan. Negara memerlukan nilai awal, jadi Anda memberikannya initialName.

Tapi inilah masalahnya useState yang membuat semua orang tersandung: Nilai awal yang Anda berikan useState hanya berjalan tepat satu kali—saat komponen dirender untuk pertama kalinya.

Saat komponen induk dirender ulang dan memberikan komponen baru initialName prop, React melihat komponen anak, melihatnya sudah ada di layar, sepenuhnya mengabaikan nilai awal yang baru dan komponen anak merender data lama yang sudah usang.

Lokal name negara hanya mempertahankan apa pun yang dimilikinya sebelumnya. Dengan menyalin prop ke status, Anda secara tidak sengaja menggandakan data.

Menggunakan a useEffect (Ini Tidak Memperbaiki Masalah)

Saat Anda pertama kali menemukan bug ini, tindakan panik yang langsung dilakukan adalah memaksa negara untuk memperbarui menggunakan a useEffect:

// AVOID THIS 
useEffect(() => {
setName(initialName);
}, [initialName]);

Kita semua telah mencobanya, namun hal ini menimbulkan serangkaian masalah baru bagi kita. Pertama, ini menyebabkan kesalahan render ganda. Komponen dirender satu kali dengan data lama, mengetahui prop berubah, menjalankan efek, memperbarui status, lalu merender untuk kedua kalinya untuk menampilkan data baru.

Lebih buruk lagi, jika pengguna Anda sedang mengetik sesuatu ke dalam formulir, dan komponen induk dirender ulang karena alasan yang sama sekali tidak terkait (seperti pembaruan status global atau pengatur waktu), efek ini akan terpicu dan sepenuhnya menghapus semua yang diketik pengguna di tengah penekanan tombol.

Perbaikannya

Anda tidak memerlukan a useEffect kait. Anda dapat menangani ini dengan rapi tergantung pada apa yang sebenarnya perlu dilakukan oleh komponen Anda.

1. ‘key’ Prop Reset (Cara Terbaik untuk Formulir)

Jika komponen anak adalah formulir dan benar-benar memerlukan status lokal sehingga pengguna dapat mengetik, perbaikannya tidak termasuk dalam komponen anak sama sekali. Itu milik orang tua.

Anda dapat menggunakan bawaan React key prop untuk memberi tahu kerangka kerja kapan tepatnya harus menghapus formulir lama dan memulai yang baru.

// Inside the Parent Component
function ProfileManager() {
const { user, isLoading } = useUserData();
if (isLoading) return <p>Loading...</p>;
// Changing the key forces React to completely rebuild the component
return <EditProfile key={user.id} initialName={user.name} />;
}

Itu key prop tidak hanya untuk merender daftar item. Di React, ketika sebuah komponen key perubahan, React sepenuhnya menghancurkan instance komponen lama dan memasang yang baru, lalu berjalan useState benar-benar segar. Formulir direset secara instan dengan data yang benar, tanpa bug negara.

2. Jangan Gunakan Negara (Jika Tidak Perlu Diedit)

Jika komponen anak sebenarnya tidak perlu mengubah data — jika hanya menampilkannya atau menghitungnya — hapus useState memblokir seluruhnya. Baca saja propnya langsung di HTML Anda.

// No state needed if you aren't changing the value locally
function ProfileDisplay({ name }) {
return <h1>Welcome back, {name}!</h1>;
}

Jika Anda tidak menyalin prop ke dalam status, prop tersebut tidak akan pernah tidak sinkron. Anak akan selalu menunjukkan dengan tepat apa yang diturunkan orang tuanya.