import { useRef } from "react";

const ref = useRef(initialValue);

// ref هكذا يمكن الحصول على قيمة
ref.current;

// ref هكذا يمكن تحديث قيمة
ref.current = someValue;

import { useRef, useEffect, useState } from "react";

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // setInputValue() قيمته الأولية نص فارغ و يمكن تحديث قيمته من خلال استدعاء دالة إسمها inputValue هنا قمنا بتعريف متغير إسمه
    const [inputValue, setInputValue] = useState("");
    
    // قيمته الأولية 0 count هنا قمنا بتعريف متغير إسمه
    const count = useRef(0);
    
    // من أجل تنفيذ الأمر الموضوع فيها كلما تم تحديث قيمة متغير معروض useEffect() هنا قمنا باستدعاء الدالة
    // inputValue  في واجهة المستخدم مما يعني أنه سيتم تنفيذ محتواها كلما تغيّرت القيمة الحالية في المتغير
    useEffect(() => {
        // واحداً count هنا قمنا بزيادة قيمة
        count.current = count.current + 1;
    });
    
    // count و قد عرضنا فيه مربع نص و قيمة المتغير App هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    return (
        <>
            <input
                type="text"
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
            />
            <h1>Render Count: {count.current}</h1>
        </>
    );
}

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

import { useRef, useEffect, useState } from "react";

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // setCurrentValue() قيمته الأولية نص فارغ و يمكن تحديث قيمته من خلال استدعاء دالة إسمها currentValue هنا قمنا بتعريف متغير إسمه
    const [currentValue, setCurrentValue] = useState("");
    
    // قيمته الأولية نص فارغ previousValue هنا قمنا بتعريف متغير إسمه
    const previousValue = useRef("");
    
    // currentValue من أجل تنفيذ الأمر الموضوع فيها كلما تم تحديث قيمة المتغير useEffect() هنا قمنا باستدعاء الدالة
    useEffect(() => {
        // واحداً count هنا قمنا بزيادة قيمة
        previousValue.current = currentValue;
    }, [currentValue]);
    
    // count و قد عرضنا فيه مربع نص و قيمة المتغير App هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    return (
        <>
            <input
                type="text"
                value={currentValue}
                onChange={(e) => setCurrentValue(e.target.value)}
            />
            <p>Current value: {currentValue}</p>
            <p>Previous value: {previousValue.current}</p>
        </>
    );
}

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

import { useRef } from "react";

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

    // عند استدعائها تقوم بوضع مؤشر focusInput() هنا قمنا بتعريف دالة إسمها
    // inputElement الماوس بداخل الوسم المربوط بالعنصر الذي يمثله المتغير 
    const focusInput = () => {
        inputElement.current.focus();
    };
    
    // و قد عرضنا فيه مربع نص و زر App هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    return (
        <>
            <input type="text" ref={inputElement} />
            <button onClick={focusInput}>Focus On Input</button>
        </>
    );
}

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