شرح صفوف ومحتوى الفقرة
في التطبيقات العملية، يؤدي تكديس خطافات useState ووسوم <Context.Provider> مباشرة داخل المكون الجذري App إلى تضخم ملف البداية واختلاط منطق الإعداد ببنية الشاشة. الأسلوب الهندسي النظيف في React هو استخراج مكون مزود مستقل (Dedicated Provider Component) مثل ThemeProvider يدير حالته داخلياً ويستقبل { children }.
بفضل تمرير الأبناء عبر خاصية children، يبقى مكون App مقروءاً ومركزاً على هيكل الواجهة العام، بينما يتكفل المزود المستقل بتهيئة الحالة ودوال التبديل في مكان واحد منظم.
HTML
const ThemeContext = createContext('light');
function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
const value = { theme, setTheme };
return (
<ThemeContext.Provider value={value}>
{children}
</ThemeContext.Provider>
);
}