المراجع والحدود الأمرية

import { useRef } from "react";
export default function App() { const input = useRef(null); return <main><h1>Focus helper</h1><label htmlFor="search">Search</label><input id="search" ref={input} /><button type="button" onClick={() => input.current?.focus()}>Focus search</button></main>; }

Clicking Focus search makes the Search input active.

ينفذ الحدث عملية ضيقة على الحقل الملتزم به مع حفظ دلالاته.

import { useEffect, useRef, useState } from "react";
export default function App() { const timer = useRef(null); const [status, setStatus] = useState("Idle"); useEffect(() => () => clearTimeout(timer.current), []); function start() { clearTimeout(timer.current); setStatus("Waiting"); timer.current = setTimeout(() => setStatus("Done"), 20); } return <main><h1>Owned timer</h1><p>{status}</p><button type="button" onClick={start}>Start</button></main>; }

Initial: Idle. After Start: Waiting, then Done while mounted.

يحفظ المرجع المقبض والحالة النتيجة، ويستبدل البدء المؤقت بدلا من تراكمه.