Reactالدالة useMemo()

import { useMemo } from "react";

const cachedValue = useMemo(calculateValue, dependencies)

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

// مهمتها إرجاع العدد مليار عندما يتم استدعاؤها expensiveCalculation هنا قمنا بتعريف دالة إسمها
function expensiveCalculation() {
    let num = 0;

    for (let i = 0; i < 1000000000; i++) {
        num += 1;
    }

    return num;
};

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // bigNumber و تخزين العدد الذي ترجعه في متغير إسمه expensiveCalculation() هنا قمنا باستدعاء الدالة
    const bigNumber = expensiveCalculation();

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

    // فقط counter هنا قمنا بتعريف الدالة التي سيتم تنفيذها عند النقر على الزر و التي مهمتها زيادة واحد على قيمة المتغير
    const increaseCounter = () => {
        setCounter(value => value + 1);
    };

    // في الصفحة <App> هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    return (
        <>
            <button onClick={increaseCounter}>Increase Counter</button>
            <p>counter = {counter}</p>
            <hr/>
            <p>bigNumber is calculated once and has a value of {bigNumber}</p>
        </>
    );
}

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

// useMemo و useState هنا قمنا بتضمين الدالتين
import { useState, useMemo } from 'react';

// مهمتها إرجاع العدد مليار عندما يتم استدعاؤها expensiveCalculation هنا قمنا بتعريف دالة إسمها
function expensiveCalculation() {
    let num = 0;

    for (let i = 0; i < 1000000000; i++) {
        num += 1;
    }

    return num;
};

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // حتى يتم تخزين القيمة التي ترجعها في الذاكرة useMemo() في الدالة expensiveCalculation() هنا قمنا بتمرير الدالة
    // bigNumber و المخزنة في الأصل في الذاكرة في متغير إسمه useMemo() بعدها وضعنا القيمة التي ترجعها الدالة
    const bigNumber = useMemo(()=> expensiveCalculation(), []);

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

    // فقط counter هنا قمنا بتعريف الدالة التي سيتم تنفيذها عند النقر على الزر و التي مهمتها زيادة واحد على قيمة المتغير
    const increaseCounter = () => {
        setCounter(value => value + 1);
    };

    // في الصفحة <App> هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    return (
        <>
            <button onClick={increaseCounter}>Increase Counter</button>
            <p>counter = {counter}</p>
            <hr/>
            <p>bigNumber is calculated once and has a value of {bigNumber}</p>
        </>
    );
}

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

// useMemo و useState هنا قمنا بتضمين الدالتين
import { useState, useMemo } from 'react';

// مضافاً إليها مليار حينما يتم استدعاؤها num مهمتها إرجاع قيمة expensiveCalculation هنا قمنا بتعريف دالة إسمها
function expensiveCalculation(num) {
    for (let i = 0; i < 1000000000; i++) {
        num += 1;
    }

    return num;
};

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // setAmount() قيمته الأولية 0 و يمكن تحديث قيمته من خلال استدعاء دالة إسمها amount هنا قمنا بتعريف متغير إسمه
    const [amount, setAmount] = useState(0);

    // حتى يتم تخزين القيمة التي ترجعها في الذاكرة useMemo() في الدالة expensiveCalculation() هنا قمنا بتمرير الدالة
    // bigNumber و المخزنة في الأصل في الذاكرة في متغير إسمه useMemo() بعدها وضعنا القيمة التي ترجعها الدالة
    const bigNumber = useMemo(()=> expensiveCalculation(amount), [amount]);

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

    // فقط counter هنا قمنا بتعريف الدالة التي سيتم تنفيذها عند النقر على الزر و التي مهمتها زيادة واحد على قيمة المتغير
    const increaseCounter = () => {
        setCounter(value => value + 1);
    };
    
    // فقط amount هنا قمنا بتعريف الدالة التي سيتم تنفيذها عند النقر على الزر و التي مهمتها زيادة واحد على قيمة المتغير
    const increaseAmount = () => {
        setAmount(value => value + 1);
    };

    // في الصفحة <App> هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    return (
        <>
            <button onClick={increaseCounter}>Increase Counter</button>
            <p>counter = {counter}</p>
            <button onClick={increaseAmount}>Increase BigNumber</button>
            <p>bigNumber = {bigNumber}</p>
        </>
    );
}

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