احترف React كالمطورين المتقدمين
كثير من المطورين يتعلمون React ويبدأون في بناء مشاريع، لكنهم يلاحظون أن الكود يصبح معقداً بسرعة. السبب؟ لم يتعلموا الأنماط التي يستخدمها المطورون المتقدمون. في هذا المقال سنكشف أهم هذه الأنماط.
١. Compound Components Pattern
بدلاً من تمرير عشرة props لمكون واحد، استخدم نمط Compound Components. المكونات تتكلم مع بعضها عبر Context داخلي، والاستخدام يصبح أنظف وأكثر مرونة.
// ❌ طريقة مربكة
<Select options={[...]} value={val} onChange={fn} label='اختر' />
// ✅ Compound Components
<Select>
<Select.Trigger>اختر خيار</Select.Trigger>
<Select.Options>
<Select.Option value='1'>خيار ١</Select.Option>
</Select.Options>
</Select>
٢. Custom Hooks لفصل المنطق
القاعدة الذهبية: المكون مسؤول عن العرض فقط، والمنطق يذهب إلى Custom Hook. هذا يجعل الكود قابلاً للاختبار وإعادة الاستخدام.
// useWindowSize.ts
export function useWindowSize() {
const [size, setSize] = useState(window.innerWidth);
useEffect(() => {
const handler = () => setSize(window.innerWidth);
window.addEventListener('resize', handler);
return () => window.removeEventListener('resize', handler);
}, []);
return size;
}
٣. إدارة الحالة بذكاء
ليس كل شيء يحتاج useState. إليك القاعدة:
- useState — للحالة المحلية البسيطة (مفتوح/مغلق، قيمة input)
- useReducer — عندما تكون الحالة معقدة ومترابطة
- Context API — لمشاركة البيانات بين مكونات متداخلة
- Zustand أو Jotai — لإدارة الحالة العالمية في مشاريع كبيرة
٤. تجنب Re-renders غير الضرورية
استخدم React.memo للمكونات التي تتلقى نفس الـ props، وuseMemo للعمليات الحسابية الثقيلة، وuseCallback للدوال التي تُمرر كـ props.
٥. Error Boundaries
لا تترك مستخدمك يرى صفحة بيضاء فارغة عند حدوث خطأ. استخدم Error Boundaries لاحتواء الأخطاء وعرض رسالة واضحة بدلاً من تعطل التطبيق بالكامل.
الخلاصة
React ليس صعباً — لكنه يحتاج منهجية. اعتمد على Custom Hooks لفصل المنطق، وفكر دائماً في إعادة الاستخدام قبل أن تكتب أي مكون جديد.