شرح صفوف ومحتوى الفقرة
ماذا لو كانت الحالة السريعة تحيط بالمكون الثقيل نفسه، مثل حاوية تخطيط تغير إطارها اللوني أو تتبع موضع التمرير حول الصفحة كاملة؟ هنا لا يمكن عزل الحالة في مكون منفصل بالأسفل لأن العنصر المحيط ذاته يعتمد عليها.
الحل الأنيق هو فصل الحاوية التفاعلية في مكون غلاف يستقبل children من الأعلى؛ فعندما تتغير حالة الغلاف الداخلي، يظل مرجع children القادم من الأب الخارجي ثابتاً تماماً، فتتخطى React إعادة تصيير المكونات الممررة بداخله تلقائياً!
HTML
function AccentShell({ children }) {
const [accent, setAccent] = useState('#7750b2');
return (
<div style={{ borderColor: accent }}>
<button onClick={() => setAccent('teal')}>
Teal
</button>
{children}
</div>
);
}