Reactالدالة useCallback()

import { useCallback } from "react";

const cachedFn = useCallback(fn, dependencies)

// <Negative> و <Positive> بالإضافة إلى المكونين useState هنا قمنا بتضمين الدالة
import { useState } from 'react';
import Positive from './components/Positive';
import Negative from './components/Negative';

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // هنا قمنا بتحديد ما سيتم طباعته في الكونسول كلما تم إعادة رسم المكوّن في واجهة المستخدم
    console.log('App is rendered.');

    // setDecimalNumber() قيمته الأولية 0 و يمكن تحديث قيمته من خلال استدعاء دالة إسمها decimalNumber هنا قمنا بتعريف متغير إسمه
    const [decimalNumber, setDecimalNumber] = useState(0);
    // setPositiveNumber() قيمته الأولية 0 و يمكن تحديث قيمته من خلال استدعاء دالة إسمها positiveNumber هنا قمنا بتعريف متغير إسمه
    const [positiveNumber, setPositiveNumber] = useState(0);
    // setNegativeNumber() قيمته الأولية 0 و يمكن تحديث قيمته من خلال استدعاء دالة إسمها negativeNumber هنا قمنا بتعريف متغير إسمه
    const [negativeNumber, setNegativeNumber] = useState(0);

    // هنا قمنا بتعريف الدالة التي سيتم تنفيذها عند النقر على الزر الأول
    const generateDecimalNumber = () => {
        setDecimalNumber(Math.random());
    };

    // هنا قمنا بتعريف الدالة التي سيتم تنفيذها عند النقر على الزر الثاني
    const generatePositiveNumber = () => {
        setPositiveNumber(Math.round(Math.random() * 1000));
    };

    // هنا قمنا بتعريف الدالة التي سيتم تنفيذها عند النقر على الزر الثالث
    const generateNegativeNumber = () => {
        setNegativeNumber(- Math.round(Math.random() * 1000));
    };

    // في الصفحة <App> هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    return (
        <>
            <div>
                <button onClick={generateDecimalNumber}>Generate Decimal</button>
                <p>Decimal Number = {decimalNumber}</p>
            </div>
            <Positive value={positiveNumber} action={generatePositiveNumber} />
            <Negative value={negativeNumber} action={generateNegativeNumber} />
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون <App> هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;

// Positive هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function Positive(props) {
    console.log('Positive is rendered.');
    return (
        <>
            <button onClick={props.action}>Generate Positive</button>
            <p>Positive Number = {props.value}</p>
        </>
    );
}

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

// Negative هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function Negative(props) {
    console.log('Negative is rendered.');
    return (
        <>
            <button onClick={props.action}>Generate Negative</button>
            <p>Negative Number = {props.value}</p>
        </>
    );
}

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

// <Negative> و <Positive> بالإضافة إلى المكونين useCallback و useState هنا قمنا بتضمين الدالتين
import { useState, useCallback } from 'react';
import Positive from './components/Positive';
import Negative from './components/Negative';

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // هنا قمنا بتحديد ما سيتم طباعته في الكونسول كلما تم إعادة رسم المكوّن في واجهة المستخدم
    console.log('App is rendered.');

    // setDecimalNumber() قيمته الأولية 0 و يمكن تحديث قيمته من خلال استدعاء دالة إسمها decimalNumber هنا قمنا بتعريف متغير إسمه
    const [decimalNumber, setDecimalNumber] = useState(0);
    // setPositiveNumber() قيمته الأولية 0 و يمكن تحديث قيمته من خلال استدعاء دالة إسمها positiveNumber هنا قمنا بتعريف متغير إسمه
    const [positiveNumber, setPositiveNumber] = useState(0);
    // setNegativeNumber() قيمته الأولية 0 و يمكن تحديث قيمته من خلال استدعاء دالة إسمها negativeNumber هنا قمنا بتعريف متغير إسمه
    const [negativeNumber, setNegativeNumber] = useState(0);

    // هنا قمنا بتعريف الدالة التي سيتم تنفيذها عند النقر على الزر الأول
    const generateDecimalNumber = () => {
        setDecimalNumber(Math.random());
    };

    // useCallback() هنا قمنا بتعريف الدالة التي سيتم تنفيذها عند النقر على الزر الثاني و لاحظ أننا وضعناها بداخل الدالة
    const generatePositiveNumber = useCallback(() => {
        setPositiveNumber(Math.round(Math.random() * 1000));
    }, []);

    // useCallback() هنا قمنا بتعريف الدالة التي سيتم تنفيذها عند النقر على الزر الثالث و لاحظ أننا وضعناها بداخل الدالة
    const generateNegativeNumber = useCallback(() => {
        setNegativeNumber(- Math.round(Math.random() * 1000));
    }, []);

    // في الصفحة <App> هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    return (
        <>
            <div>
                <button onClick={generateDecimalNumber}>Generate Decimal</button>
                <p>Decimal Number = {decimalNumber}</p>
            </div>
            <Positive value={positiveNumber} action={generatePositiveNumber} />
            <Negative value={negativeNumber} action={generateNegativeNumber} />
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون <App> هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;

// memo() هنا قمنا بتضمين الدالة
import { memo } from 'react';

// Positive هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function Positive(props) {
    console.log('Positive is rendered.');
    return (
        <>
            <button onClick={props.action}>Generate Positive</button>
            <p>Positive Number = {props.value}</p>
        </>
    );
}

// في الذاكرة و جعله يمكن الوصول إليه من خارج هذا الملف Positive هنا قمنا بحفظ المكون
export default memo(Positive);

// memo() هنا قمنا بتضمين الدالة
import { memo } from 'react';

// Negative هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function Negative(props) {
    console.log('Negative is rendered.');
    return (
        <>
            <button onClick={props.action}>Generate Negative</button>
            <p>Negative Number = {props.value}</p>
        </>
    );
}

// في الذاكرة و جعله يمكن الوصول إليه من خارج هذا الملف Negative هنا قمنا بحفظ المكون
export default memo(Negative);

// <Negative> و <Positive> بالإضافة إلى المكونين useCallback و useState هنا قمنا بتضمين الدالتين
import { useState, useCallback } from 'react';
import Positive from './components/Positive';
import Negative from './components/Negative';

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // هنا قمنا بتحديد ما سيتم طباعته في الكونسول كلما تم إعادة رسم المكوّن في واجهة المستخدم
    console.log('App is rendered.');

    // setDecimalNumber() قيمته الأولية 0 و يمكن تحديث قيمته من خلال استدعاء دالة إسمها decimalNumber هنا قمنا بتعريف متغير إسمه
    const [decimalNumber, setDecimalNumber] = useState(0);
    // setPositiveNumber() قيمته الأولية 0 و يمكن تحديث قيمته من خلال استدعاء دالة إسمها positiveNumber هنا قمنا بتعريف متغير إسمه
    const [positiveNumber, setPositiveNumber] = useState(0);
    // setNegativeNumber() قيمته الأولية 0 و يمكن تحديث قيمته من خلال استدعاء دالة إسمها negativeNumber هنا قمنا بتعريف متغير إسمه
    const [negativeNumber, setNegativeNumber] = useState(0);

    // هنا قمنا بتعريف الدالة التي سيتم تنفيذها عند النقر على الزر الأول
    const generateDecimalNumber = () => {
        setDecimalNumber(Math.random());
    };

    // و useCallback() هنا قمنا بتعريف الدالة التي سيتم تنفيذها عند النقر على الزر الثاني و لاحظ أننا وضعناها بداخل الدالة
    // لأنه يفترض تنفيذ الدالة في حال تغيرت قيمته useCallback() في مصفوفة الدالة decimalNumber أننا مررنا المتغير
    const generatePositiveNumber = useCallback(() => {
        setPositiveNumber(Math.round(decimalNumber + Math.random() * 1000));
    }, [decimalNumber]);

    // و useCallback() هنا قمنا بتعريف الدالة التي سيتم تنفيذها عند النقر على الزر الثالث و لاحظ أننا وضعناها بداخل الدالة
    // لأنه يفترض تنفيذ الدالة في حال تغيرت قيمته useCallback() في مصفوفة الدالة decimalNumber أننا مررنا المتغير
    const generateNegativeNumber = useCallback(() => {
        setNegativeNumber(- Math.round(decimalNumber + Math.random() * 1000));
    }, [decimalNumber]);

    // في الصفحة <App> هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    return (
        <>
            <div>
                <button onClick={generateDecimalNumber}>Generate Decimal</button>
                <p>Decimal Number = {decimalNumber}</p>
            </div>
            <Positive value={positiveNumber} action={generatePositiveNumber} />
            <Negative value={negativeNumber} action={generateNegativeNumber} />
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون <App> هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;

// memo() هنا قمنا بتضمين الدالة
import { memo } from 'react';

// Positive هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function Positive(props) {
    console.log('Positive is rendered.');
    return (
        <>
            <button onClick={props.action}>Generate Positive</button>
            <p>Positive Number = {props.value}</p>
        </>
    );
}

// في الذاكرة و جعله يمكن الوصول إليه من خارج هذا الملف Positive هنا قمنا بحفظ المكون
export default memo(Positive);

// memo() هنا قمنا بتضمين الدالة
import { memo } from 'react';

// Negative هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function Negative(props) {
    console.log('Negative is rendered.');
    return (
        <>
            <button onClick={props.action}>Generate Negative</button>
            <p>Negative Number = {props.value}</p>
        </>
    );
}

// في الذاكرة و جعله يمكن الوصول إليه من خارج هذا الملف Negative هنا قمنا بحفظ المكون
export default memo(Negative);