التنميط وMemo المقصودة

import { useMemo, useState } from "react";
const items = [{ id: "a", label: "Alpha", cost: 2 }, { id: "b", label: "Beta", cost: 3 }];
export default function App() { const [query, setQuery] = useState(""); const total = useMemo(() => items.filter(x => x.label.toLowerCase().includes(query.toLowerCase())).reduce((n, x) => n + x.cost, 0), [query]); return <main><h1>Filtered total: {total}</h1><label>Query<input value={query} onChange={e => setQuery(e.target.value)} /></label></main>; }

Initial total: 5. Query bet: total 3.

الحساب نقي ويتبع query ويحفظ حذف التخزين النتيجة، والبيانات ثابتة للفحص.

import { memo, useState } from "react";
const Label = memo(function Label({ text }) { return <p>{text}</p>; });
export default function App() { const [count, setCount] = useState(0); return <main><h1>Stable prop boundary</h1><Label text="Fixed label" /><button type="button" onClick={() => setCount(c => c + 1)}>Unrelated count {count}</button></main>; }

The label stays Fixed label while the button count increases.

لا تغير الزيادة خاصية الابن، وقد تتجنب memo عملا دون أن يعتمد العقد على عد العرض.