Reactالدالة useEffect()

import { useEffect } from "react";

useEffect(setup, dependency?);

useEffect(() => {
    // سيتم تنفيذ الأوامر الموضوعة هنا إذا تم رصد أي تغيير
});

useEffect(() => {
    // سيتم تنفيذ الأوامر الموضوعة هنا عند عرض المكوّن أول مرة فقط
}, []);

useEffect(() => {
    // سيتم تنفيذ الأوامر الموضوعة هنا عند عرض المكوّن أول مرة 
    // variables و عند حصول أي تغيير في قيمة متغير تم تمريره في المصفوفة
}, [variables]);

import { useEffect, useState } from "react";

// MyComponent هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function MyComponent() {
    // setCounter() قيمته الأولية 0 و يمكن تحديث قيمته من خلال استدعاء دالة إسمها counter هنا قمنا بتعريف متغير إسمه
    const [counter, setCounter] = useState(0);
    
    // من أجل تنفيذ الدالة الموضوعة فيها مرة واحدة عندما يتم عرض محتوى المكوّن useEffect() هنا قمنا باستدعاء الدالة
    useEffect(() => {
        // واحداً كل ثانية counter هنا قمنا بإنشاء مؤقت مهمته زيادة قيمة المتغير
        const intervalId = setInterval(() => {
            setCounter(value => value + 1);
        }, 1000);

        // هنا قمنا بإيقاف عمل المؤقت في حال تم إزالة المكوّن من واجهة المستخدم
        return () => clearInterval(intervalId);
    }, []);
    
    // counter و قد عرضنا فيه قيمة المتغير MyComponent هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    return (
        <>
            <h1>I've rendered {counter} times</h1>
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف MyComponent هنا قمنا بجعل المكون
export default MyComponent;

import { useEffect, useState } from "react";

// MyComponent هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function MyComponent() {
    // قيمته الأولية هي عرض شاشة المستخدم windowWidth هنا قمنا بتعريف متغير إسمه
    // setWindowWidth() و يمكن تحديث قيمته من خلال استدعاء دالة إسمها 
    const [windowWidth, setWindowWidth] = useState(window.innerWidth);

    // المربوط به windowWidth و جعلناها تقوم بوضع قيمة عرض الشاشة في المتغير handleResize() هنا قمنا بتعريف الدالة
    function handleResize() {
        setWindowWidth(window.innerWidth);
    }
    
    // من أجل تنفيذ الدالة الموضوعة فيها عند useEffect() هنا قمنا باستدعاء الدالة
    // windowWidth عرض محتوى المكوّن و في كل مرة تتغير فيها قيمة المتغير
    useEffect(() => {
        // عند رصد أي تغير يحصل في حجم الصفحة handleResize() من أجل استدعاء الدالة window للكائن resize هنا قمنا بإضافة الحدث
        window.addEventListener('resize', handleResize);
        // في حال تم إزالة المكوّن من واجهة المستخدم window من الكائن resize هنا قمنا بإزالة الحدث
        return () => {
            window.removeEventListener('resize', handleResize);
        }
    }, []);
    
    // windowWidth و قد عرضنا فيه قيمة المتغير MyComponent هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    return (
        <>
            <h1>Window width is {windowWidth}px</h1>
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف MyComponent هنا قمنا بجعل المكون
export default MyComponent;

import { useEffect, useState } from "react";

// MyComponent هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function MyComponent() {
    // "Home" قيمته الأولية resourceType هنا قمنا بتعريف متغير إسمه
    // setResourceType() و يمكن تحديث قيمته من خلال استدعاء دالة إسمها 
    const [resourceType, setResourceType] = useState("Home");

    // من أجل تنفيذ الدالة الموضوعة فيها useEffect() هنا قمنا باستدعاء الدالة
    // resourceType بالإضافة إلى كل مرة تتغير فيها قيمة المتغير 
    useEffect(() => {
        alert("resourceType is set to " + resourceType);
    }, [resourceType]);

    // MyComponent هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    // resourceType و قد عرضنا فيه 3 أزرار بالإضافة إلى قيمة المتغير 
    return (
        <>
            <button onClick={() => setResourceType("Home")}>Home</button>
            <button onClick={() => setResourceType("Posts")}>Posts</button>
            <button onClick={() => setResourceType("Users")}>Users</button>
            <p>{resourceType}</p>
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف MyComponent هنا قمنا بجعل المكون
export default MyComponent;