عرض الخادم وعقود Hydration

import { useState } from "react";
function Report({ displayDate }) { const [open, setOpen] = useState(false); return <section><h2>Report date: {displayDate}</h2><button type="button" onClick={() => setOpen(x => !x)}>Toggle details</button>{open && <p>Local details</p>}</section>; }
export default function App() { return <main><h1>Deterministic report</h1><Report displayDate="2026-10-25" /></main>; }

Initial: Report date: 2026-10-25. Toggle details reveals Local details.

التاريخ مدخل مشترك صريح ويكشف الزر التفاصيل بعد خادم وربط متطابقين.

import { useId } from "react";
function Field() { const id = useId(); return <div><label htmlFor={id}>Contact name</label><input id={id} aria-describedby={`${id}-help`} /><p id={`${id}-help`}>Use your preferred name.</p></div>; }
export default function App() { return <main><h1>Generated field relationships</h1><Field /><Field /></main>; }

Two labeled Contact name inputs with distinct matching label targets.

لكل حقل معرف متميز مرتبط مع حفظ تطابق الشجرة، ولا تعد السلاسل الحرفية ناتجا عاما.