الأحداث ولقطات الحالة

import { useState } from "react";
export default function App() { const [count, setCount] = useState(0); return <main><h1>Counter</h1><p>{count}</p><button type="button" onClick={() => setCount(c => c + 1)}>Add one</button></main>; }

Initial: 0. After one Add one click: 1.

يصطف تحديث نقي ويغير النقر العدد من صفر إلى واحد.

import { useState } from "react";
export default function App() { const [count, setCount] = useState(0); function addThree() { setCount(c => c + 1); setCount(c => c + 1); setCount(c => c + 1); } return <main><h1>Queued updates</h1><p>{count}</p><button type="button" onClick={addThree}>Add three</button></main>; }

Initial: 0. After one Add three click: 3.

يستقبل كل محدث نتيجة السابق فتضيف النقرة ثلاثا.