شرح useEffect في React

 useEffect هو hook في React يُستخدم لإدارة الجوانب الجانبية في المكونات الوظيفية. الهدف الرئيسي منه هو تنفيذ شفرة برمجية بعد عملية التصيير (rendering)، مثل جلب البيانات من API أو التعامل مع البيانات في المتصفح.

إليك مثال بسيط حول كيفية استخدام useEffect:

import React, { useState, useEffect } from 'react'; const MyComponent = () => {     // تعريف حالة محلية     const [data, setData] = useState(null);     // استخدام useEffect لإدارة الجوانب الجانبية     useEffect(() => {         // جلب البيانات من API         fetch('https://api.example.com/data')             .then(response => response.json())             .then(data => setData(data))             .catch(error => console.error('Error fetching data:', error));     }, []); // المصفوفة الفارغة تعني أن useEffect سيتم تنفيذه مرة واحدة فقط عند تصيير المكون     return (         <div>             {data ? (                 <div>Data: {JSON.stringify(data)}</div>             ) : (                 <div>Loading...</div>             )}         </div>     ); } export default MyComponent;

شرح الكود:

• التعريف بالمكون: MyComponent هو مكون وظيفي يحتوي على حالة محلية data باستخدام useState.

• استخدام useEffect:

•  useEffect يستخدم لجلب البيانات من API عند تصيير المكون لأول مرة.

• المصفوفة الفارغة: المصفوفة الفارغة كمعامل ثاني في useEffect تعني أن هذا الـ hook سيتم تنفيذه مرة واحدة فقط بعد التصيير الأولي للمكون.

• تحديث الحالة: عند جلب البيانات بنجاح، يتم تحديث حالة data باستخدام setData.

• عرض البيانات: إذا كانت البيانات موجودة، يتم عرضها، وإلا سيتم عرض رسالة "Loading...".

وضع useEffect داخل المكون هو الخيار المفضل لأن ذلك يضمن أن يتم تنفيذ الشيفرة بعد كل عملية تصيير كما هو متوقع، مما يتيح لك التعامل مع الجوانب الجانبية بصورة فعّالة ومنظمة.