ماهي الفائدة من ReactDOM.createPortal ؟

بالنسبة للسؤال الأول تم استخدام createPortal حتى تستطيع الإبقاء على هيكل DOM منفصل لمكون التحميل. باستخدام createPortal ، يتم إضافة عناصر التحميل إلى عقدة DOM مختلفة بدلاً من تضمينها في هيكل المكونات الأساسي.يمكنك الإطلاع على المزيد من التفاصيل من هذا الرابط

ثانياً تستخدم المتغيرات خارج المكون إذا كانت ثابتة ولا تتغير قيمتها أثناء عملية التنفيذ.

ويمكن أيضا استخدام متغير خارجي حتى لو كان قابلاً للتغيير، ولكن بشرط أن لا يحدث تغيير في قيمته أثناء عملية ال render للمكون.

فمثلا لو كان المتغير يعبر عن بيانات تغيرت قبل عملية ال render ، لكن لا تتغير خلالها، فيمكن استخدامه خارج المكون.

بشكل عام، نحن نبتعد عن استخدام المتغيرات القابلة للتغيير داخل عملية ال render ، لتجنب مشاكل إعادة ال render غير الضرورية.

وعليكم السلام , أهلاً محمود ,

• بالنسبة للسؤال الأول: لماذا نستخدم ReactDOM.createPortal وما هي فائدته؟

ReactDOM.createPortal هو وظيفة في مكتبة ReactDOM في React تسمح بتقديم المكونات إلى عنصر DOM خارج هيكلة الشجرة الرئيسية لتطبيق React. وتستخدم عادة في حالات تريد فيها عرض المحتوى في عنصر DOM مستقل عن عنصر الجذر الرئيسي للتطبيق.وذلك يفيد في توفير القدرة على عرض المكونات في مكان محدد بشكل مستقل عن شجرة المكونات الرئيسية. يمكن استخدامه في حالات مثل عرض شريط التحميل (loader) في الجزء العلوي من الصفحة أو عرض قائمة منبثقة (dropdown) خارج المكون الأصلي.

إليك مثال يوضح ذلك : بفرض أنه نريد وضع شريط التحميل في الجزء العلوي من الصفحة , فسوف نقوم باستخدام  createPortal كما في الكود التالي :

import React from 'react';
import ReactDOM from 'react-dom';

const Loader = () => {
  return ReactDOM.createPortal(
    <div className="loader-wrapper">
      <div className="loader">
        <img src={loaderImg} alt="Loading..." />
      </div>
    </div>,
    document.getElementById('loader-root')
  );
};

const App = () => {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <p>This is some content.</p>
      <Loader />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

لاحظ في هذا المثال، قمت باستخدام ReactDOM.createPortal لعرض مكون Loader في عنصر DOM منفصل ب id يسمى loader-root. وبالتالي يتم عرض شريط التحميل في الجزء العلوي من الصفحة دون أن يكون جزءا من شجرة المكونات الرئيسية.

• أما بالنسبة للسؤال الثاني: فائدة وضع المتغيرات فوق الدالة في مكون React

في المثال الأول الذي قدمته، يتم تعريف المتغيرات قبل الدالة المكون. هذا يتيح إمكانية استخدام هذه المتغيرات داخل الدالة أو في أي مكان آخر داخل الملف. المثال التالي يوضح ذلك :

import React from 'react';

const UserStats = () => {
  const a = 'Hello';
  const b = 'World';

  return (
    <div className="component">
      <h2>{a} {b}</h2>
      <p>This is a user stats component.</p>
    </div>
  );
};

export default UserStats;

في هذا المثال، قمت بتعريف المتغيرات a و b قبل الدالة المكون. وبالتالي، يمكن استخدامها داخل الدالة لعرض قيمهما في العناصر JSX.

أما في المثال الثاني، فقمت تعريف المتغيرات داخل الدالة نفسها. وبالتالي، يمكن استخدامها فقط داخل الدالة ولا يمكن الوصول إليها في أي مكان آخر في الملف. كما في المثال التالي :

import React, { useEffect, useState } from 'react';

const UserStats = () => {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
     const fetchUserData = async () => {
      const response = await fetch('https://api.example.com/user');
      const data = await response.json();

      setUserData(data);
    };

    fetchUserData();
  }, []);

  const username = userData?.username;
  const followers = userData?.followers;

  return (
    <div className="component">
      <h2>{username}</h2>
      <p>Followers: {followers}</p>
    </div>
  );
};

export default UserStats;

في هذا المثال، قمت باستخدام المتغيرات username و followers في المنطق التحضيري (استدعاء API وتحديث الحالة) قبل عرض المكون. بمجرد جلب بيانات المستخدم وتحديث الحالة، يتم استخدام المتغيرات في عناصر JSX لعرض اسم المستخدم وعدد المتابعين

السلام عليم 
فائدة createPortal تظهر عندما تكون في حاجة الى عمل عنصر خارج سلسلة الdom الخاصة بك ,
مثل modal في أعلى الصفحة على سبيل المثال 
مثال :
 

import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ children }) => {
  const portalRoot = document.getElementById('portal-root');
  return ReactDOM.createPortal(
    children,
    portalRoot
  );
};

const App = () => {
  return (
    <div>
      <h1>My React App</h1>
      <Modal>
        <p>This is a modal content</p>
      </Modal>
    </div>
  );
};

// في ملف HTML:
// <div id="portal-root"></div>

ReactDOM.render(<App />, document.getElementById('root'));

_____
بالنسبة للسؤال الثاني :
ما هو الفرق بين تعريف المتغيرات داخل الblock الخاص بالfunctional component و خارجة ؟

الفرق هو ان عند كل مرة يحدث تغيير في state موجودة داخل العنصر فان ذلك العنصر يحدث rerender له , أي يتم انشاؤة من جديد ,
و في كل مرة يتم انشاؤه من جديد يتم انشاء العناصر بداخلة فبالتالي فان المتغيرات الموجودة داخل العنصر يتم اعادة ان شاؤها في كل مرة يحدث rerender للعنصر 

فمن الأفضل إذا كانت المتغيرات ثابتة ولا تعتمد على غيرها من المتغيرات من الأفضل ابقاؤها خارج الcomponent حتى يتم انشاؤها مرة واحدة .

مثال :
 

const MyComponent = () => {
  const insideVariable = "I am inside the component.";

  return (
    <div>
      <p>{insideVariable}</p>
    </div>
  );
};
//___________________________________________________________________

// Variable is outside the component
const outsideVariable = "I am outside the component.";

const MyComponent = () => {
  return (
    <div>
      <p>{outsideVariable}</p>
    </div>
  );
};