واجهات المكونات وHooks المخصصة

import { useState } from "react";
function Stepper({ value, onIncrement }) { return <button type="button" onClick={onIncrement}>Increase from {value}</button>; }
export default function App() { const [count, setCount] = useState(0); return <main><h1>Controlled API</h1><Stepper value={count} onIncrement={() => setCount(c => c + 1)} /></main>; }

Initial button: Increase from 0. After click: Increase from 1.

الأب مالك الحالة الوحيد ويبلغ الابن النية برده.

import { useState } from "react";
function useCounter() { const [count, setCount] = useState(0); return { count, increment: () => setCount(c => c + 1) }; }
function Counter({ label }) { const { count, increment } = useCounter(); return <button type="button" onClick={increment}>{label}: {count}</button>; }
export default function App() { return <main><h1>Independent Hook calls</h1><Counter label="A" /><Counter label="B" /></main>; }

Initial: A: 0 and B: 0. Clicking A changes only A to 1.

يستدعي الاثنان المنطق نفسه بحالتين مستقلتين.