วาง state แต่ละส่วนไว้ที่บรรพบุรุษร่วมที่ใกล้ที่สุดเพื่อแบ่งปันข้อมูลระหว่างหลายคอมโพเนนต์โดยไม่ต้องทำสำเนาซ้ำ
เปิดบทเรียนนี้ใน Kodokonคอมโพเนนต์พี่น้องสองตัวต้องแสดงข้อมูลเดียวกัน: เช่น ช่องค้นหาและรายการที่มันกรอง state ในตัวเองของแต่ละตัวใช้ไม่ได้ เพราะทั้งคู่มองไม่เห็นกัน ทางออกคือ ยก state ขึ้น ไปไว้ที่บรรพบุรุษร่วมที่ใกล้ที่สุด: คอมโพเนนต์แม่เป็นเจ้าของข้อมูลและส่งกลับลงมาผ่าน props
import { useState } from "react";
function ProductPage({ products }) {
const [query, setQuery] = useState("");
return (
<>
<SearchBar query={query} onChange={setQuery} />
<ProductList products={products} query={query} />
</>
);
}ลูก ๆ จะกลายเป็นคอมโพเนนต์ แบบควบคุม (controlled): พวกมันรับค่าแบบอ่านอย่างเดียว และหากต้องการเปลี่ยนค่า ให้เรียกฟังก์ชัน callback ที่คอมโพเนนต์แม่จัดเตรียมไว้ ข้อมูลไหลลงผ่าน props ส่วนคำร้องขอเปลี่ยนแปลงไหลขึ้นผ่านฟังก์ชัน การไหลทางเดียวนี้ทำให้ติดตามพฤติกรรมของแอปพลิเคชันได้ง่าย
function SearchBar({ query, onChange }) {
return (
<input
value={query}
onChange={(e) => onChange(e.target.value)}
placeholder="Search for a product"
/>
);
}
function ProductList({ products, query }) {
const visible = products.filter((p) =>
p.name.toLowerCase().includes(query.toLowerCase())
);
return (
<ul>
{visible.map((p) => <li key={p.id}>{p.name}</li>)}
</ul>
);
}ข้อมูลทุกชิ้นต้องมี แหล่งความจริงเพียงหนึ่งเดียว (single source of truth) หากคอมโพเนนต์สองตัวต่างเก็บสำเนาของ state เดียวกันไว้เอง สำเนาเหล่านั้นจะเบี่ยงเบนจากกันในที่สุด: ตัวหนึ่งถูกอัปเดต อีกตัวไม่ถูก และส่วนต่อประสานก็จะขัดแย้งกันเอง การยก state ขึ้นจะขจัดความเสี่ยงนั้น เมื่อข้อมูลต้องข้ามหลายระดับ การประกอบ (composition) (บทเรียนถัดไป) และต่อมา context จะช่วยลดภาระการส่ง props