` tag handled when declared in a component?","questionOptions":[{"text":"It is rendered in the body as part of the visible DOM.","id":"arGyJdgZdyuGeTwrdQ3Nd","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"يتم تقديمه في الجسم كجزء من DOM المرئي.","mdHtmlArabic":"يتم تقديمه في الجسم كجزء من DOM المرئي."},{"text":"It is ignored and must still be set with `document.title`.","id":"vyOh4GPrxh1TOed-ynyBL","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"يتم تجاهله ويجب أن يظل مضبوطًا<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">document.title</code> .","mdHtmlArabic":"يتم تجاهله ويجب أن يظل مضبوطًا<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">document.title</code> ."},{"text":"It only works with class components.","id":"ysYAfMskYfnv_iWfWkVxo","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"إنه يعمل فقط مع مكونات الفئة.","mdHtmlArabic":"إنه يعمل فقط مع مكونات الفئة."},{"text":"React moves it into the `<head>` automatically.","id":"eij8wQlP2W52CyXwCUxjl","correct":true,"explanation":{"mdText":"React 19 extracts `<title>` and other metadata tags from the JSX and automatically inserts them into the document `<head>`.","mdHtml":"مقتطفات React 19<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><title></code> وعلامات البيانات الوصفية الأخرى من JSX وإدراجها تلقائيًا في المستند<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><head></code> .","mdHtmlArabic":"مقتطفات React 19<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><title></code> وعلامات البيانات الوصفية الأخرى من JSX وإدراجها تلقائيًا في المستند<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><head></code> ."},"mdHtml":"يحركه React إلى<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><head></code> تلقائيا.","mdHtmlArabic":"يحركه React إلى<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><head></code> تلقائيا."}],"multipleAnswers":false,"questionTextHtml":"في React 19، كيف يتم<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><title></code> العلامة التي تم التعامل معها عند إعلانها في مكون؟","questionTextHtmlArabic":"في React 19، كيف يتم<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><title></code> العلامة التي تم التعامل معها عند إعلانها في مكون؟"},{"id":"uem9pCSK3ADvtrHElbjH5","questionText":"Which script-related behavior is correctly handled by React 19’s declarative `<script>` support?","questionOptions":[{"text":"Scripts are always placed at the bottom of the body.","id":"RsQ1tKpg5WyfZCGp2QpDP","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"يتم وضع النصوص دائمًا في أسفل النص.","mdHtmlArabic":"يتم وضع النصوص دائمًا في أسفل النص."},{"text":"Scripts with `async` or `defer` are injected into `<head>` and cleaned up on unmount.","id":"ePdD7Qx51U5zLO2pfWagQ","correct":true,"explanation":{"mdText":"React 19 allows declarative script loading in JSX, including `async`, `defer`, and other attributes. The script is cleaned up when the component unmounts.","mdHtml":"يسمح React 19 بتحميل البرنامج النصي التصريحي في JSX، بما في ذلك<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">async</code> ،<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">defer</code> ، وسمات أخرى. يتم تنظيف البرنامج النصي عند إلغاء تحميل المكون.","mdHtmlArabic":"يسمح React 19 بتحميل البرنامج النصي التصريحي في JSX، بما في ذلك<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">async</code> ،<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">defer</code> ، وسمات أخرى. يتم تنظيف البرنامج النصي عند إلغاء تحميل المكون."},"mdHtml":"البرامج النصية مع<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">async</code> أو<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">defer</code> يتم حقنها في<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><head></code> وتم تنظيفها عند إلغاء التثبيت.","mdHtmlArabic":"البرامج النصية مع<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">async</code> أو<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">defer</code> يتم حقنها في<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><head></code> وتم تنظيفها عند إلغاء التثبيت."},{"text":"Scripts are run twice for hydration safety.","id":"9YmKuiQxEKdIj-tKMhcIU","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"يتم تشغيل البرامج النصية مرتين لضمان سلامة الترطيب.","mdHtmlArabic":"يتم تشغيل البرامج النصية مرتين لضمان سلامة الترطيب."},{"text":"Scripts cannot be removed after being inserted.","id":"jidl0MiVBvWrPsA9n-bwJ","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"لا يمكن إزالة البرامج النصية بعد إدراجها.","mdHtmlArabic":"لا يمكن إزالة البرامج النصية بعد إدراجها."}],"multipleAnswers":false,"questionTextHtml":"ما هو السلوك المرتبط بالنص البرمجي الذي يتم التعامل معه بشكل صحيح بواسطة إعلان React 19؟<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><script></code> يدعم؟","questionTextHtmlArabic":"ما هو السلوك المرتبط بالنص البرمجي الذي يتم التعامل معه بشكل صحيح بواسطة إعلان React 19؟<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><script></code> يدعم؟"},{"id":"Ns2_SVDtEMg9KGo7SuwW3","questionText":"**(True or False)** Passing a ref as a prop in React 19 still requires the use of `forwardRef`.","questionOptions":[{"text":"True","id":"SdGq2tX9zG4t62dvhT6IC","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"حقيقي","mdHtmlArabic":"حقيقي"},{"text":"False","id":"-l8enqBKSDtfzfk0KIYo4","correct":true,"explanation":{"mdText":"React 19 allows refs to be passed as regular props, so `forwardRef` is only needed when exposing imperative methods.","mdHtml":"يسمح React 19 بتمرير المراجع كدعامات عادية، لذا<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">forwardRef</code> لا تكون هناك حاجة إليها إلا عند عرض الأساليب الآمرة.","mdHtmlArabic":"يسمح React 19 بتمرير المراجع كدعامات عادية، لذا<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">forwardRef</code> لا تكون هناك حاجة إليها إلا عند عرض الأساليب الآمرة."},"mdHtml":"خطأ شنيع","mdHtmlArabic":"خطأ شنيع"}],"multipleAnswers":false,"questionTextHtml":"(صواب أو خطأ) لا يزال تمرير مرجع كدعامة في React 19 يتطلب استخدام<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">forwardRef</code> .","questionTextHtmlArabic":"(صواب أو خطأ) لا يزال تمرير مرجع كدعامة في React 19 يتطلب استخدام<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">forwardRef</code> ."},{"id":"_dJAj8gbXdfIZVL8w5T7R","questionText":"**(True or False)** In React 19, cleanup functions returned from a ref callback can fully replace the need for `useEffect` in some cases.","questionOptions":[{"text":"True","id":"UJT-_0-v3qh0RZfopLsuU","correct":true,"explanation":{"mdText":"Ref callback cleanup can manage DOM event listeners, timers, or subscriptions without needing `useEffect`.","mdHtml":"يمكن لعملية تنظيف رد نداء المرجع إدارة مستمعي أحداث DOM أو المؤقتات أو الاشتراكات دون الحاجة إلى<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">useEffect</code> .","mdHtmlArabic":"يمكن لعملية تنظيف رد نداء المرجع إدارة مستمعي أحداث DOM أو المؤقتات أو الاشتراكات دون الحاجة إلى<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">useEffect</code> ."},"mdHtml":"حقيقي","mdHtmlArabic":"حقيقي"},{"text":"False","id":"Wqr2RH5btFcKgIrmYNClj","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"خطأ شنيع","mdHtmlArabic":"خطأ شنيع"}],"multipleAnswers":false,"questionTextHtml":"(صواب أو خطأ) في React 19، يمكن لوظائف التنظيف التي يتم إرجاعها من رد نداء مرجعي أن تحل محل الحاجة إلى<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">useEffect</code> في بعض الحالات.","questionTextHtmlArabic":"(صواب أو خطأ) في React 19، يمكن لوظائف التنظيف التي يتم إرجاعها من رد نداء مرجعي أن تحل محل الحاجة إلى<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">useEffect</code> في بعض الحالات."},{"id":"p3t3Se0POGqzRkxrFz4ZZ","questionText":"**(True or False)** In React 19, you can use a functional component directly as a context provider’s `value`.","questionOptions":[{"text":"True","id":"BgNxxWpSFzEZyvGlpJjuG","correct":true,"explanation":{"mdText":"The rendered value of the functional component is passed to all consumers of that context.","mdHtml":"يتم تمرير قيمة المقدمة للمكون الوظيفي إلى جميع مستهلكي هذا السياق.","mdHtmlArabic":"يتم تمرير قيمة المقدمة للمكون الوظيفي إلى جميع مستهلكي هذا السياق."},"mdHtml":"حقيقي","mdHtmlArabic":"حقيقي"},{"text":"False","id":"irI2qO8Fx5uOb5qspBU1-","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"خطأ شنيع","mdHtmlArabic":"خطأ شنيع"}],"multipleAnswers":false,"questionTextHtml":"(صواب أو خطأ) في React 19، يمكنك استخدام مكون وظيفي بشكل مباشر كمزود سياق<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">value</code> .","questionTextHtmlArabic":"(صواب أو خطأ) في React 19، يمكنك استخدام مكون وظيفي بشكل مباشر كمزود سياق<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">value</code> ."},{"id":"mADP0QLQnT8_P1fUZkOFN","questionText":"**(True or False)** React 19 supports setting document metadata like `<title>` and `<meta>` by directly writing them inside JSX.","questionOptions":[{"text":"True","id":"CYh3Ibq2h7bfK24S4Y6GO","correct":true,"explanation":{"mdText":"These tags are recognized and moved to the document head automatically during rendering.","mdHtml":"يتم التعرف على هذه العلامات ونقلها إلى رأس المستند تلقائيًا أثناء العرض.","mdHtmlArabic":"يتم التعرف على هذه العلامات ونقلها إلى رأس المستند تلقائيًا أثناء العرض."},"mdHtml":"حقيقي","mdHtmlArabic":"حقيقي"},{"text":"False","id":"lZXytM3StJhjnt1_7osBj","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"خطأ شنيع","mdHtmlArabic":"خطأ شنيع"}],"multipleAnswers":false,"questionTextHtml":"(صواب أو خطأ) يدعم React 19 إعداد بيانات تعريف المستند مثل<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><title></code> و<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><meta></code> عن طريق كتابتها مباشرة داخل JSX.","questionTextHtmlArabic":"(صواب أو خطأ) يدعم React 19 إعداد بيانات تعريف المستند مثل<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><title></code> و<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><meta></code> عن طريق كتابتها مباشرة داخل JSX."},{"id":"O7__Q6Tf4jAuQ15uqoiFB","questionText":"**(True or False)** React 19’s support for `<script>` in JSX only works for inline scripts,. not external sources.","questionOptions":[{"text":"True","id":"NdQQh9_8yFmxVXbKbINp5","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"حقيقي","mdHtmlArabic":"حقيقي"},{"text":"False","id":"ZfqqQuKvpoyKwKuhlAmS9","correct":true,"explanation":{"mdText":"React 19 allows loading both inline and external scripts using the `<script>` tag in JSX.","mdHtml":"يتيح React 19 تحميل البرامج النصية المضمنة والخارجية باستخدام<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><script></code> العلامة في JSX.","mdHtmlArabic":"يتيح React 19 تحميل البرامج النصية المضمنة والخارجية باستخدام<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><script></code> العلامة في JSX."},"mdHtml":"خطأ شنيع","mdHtmlArabic":"خطأ شنيع"}],"multipleAnswers":false,"questionTextHtml":"(صواب أو خطأ) دعم React 19 لـ<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><script></code> في JSX يعمل فقط مع البرامج النصية المضمنة، وليس المصادر الخارجية.","questionTextHtmlArabic":"(صواب أو خطأ) دعم React 19 لـ<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><script></code> في JSX يعمل فقط مع البرامج النصية المضمنة، وليس المصادر الخارجية."},{"id":"t7ESX-2Ac-myBSr6E9cmv","questionText":"What happens when this component is rendered?\n```jsx\nfunction App() {\n const inputRef = useRef();\n return <FancyInput inputRef={inputRef} />;\n}\n\nfunction FancyInput({ inputRef }) {\n return <input ref={inputRef} />;\n}\n\nexport default App\n```","questionOptions":[{"text":"The input will not be focusable.","id":"K7Xob0sU1C1li1p70Pbip","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"لن يكون من الممكن التركيز على إدخال .","mdHtmlArabic":"لن يكون من الممكن التركيز على إدخال ."},{"text":"An error will be thrown because `ref` must be called `ref`.","id":"6S3nNX715AyfzsCgY5RHU","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"سيتم طرح خطأ بسبب<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">ref</code> يجب أن يتم استدعاؤه<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">ref</code> .","mdHtmlArabic":"سيتم طرح خطأ بسبب<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">ref</code> يجب أن يتم استدعاؤه<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">ref</code> ."},{"text":"The `ref` will be correctly attached to the input element.","id":"M6GDpFj6HKvdUY6ePWKCf","correct":true,"explanation":{"mdText":"React 19 allows refs to be passed with any prop name and applied directly to elements—no `forwardRef` needed.","mdHtml":"يسمح React 19 بتمرير المراجع مع أي اسم دعامة وتطبيقها مباشرة على العناصر - لا<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">forwardRef</code> ضروري.","mdHtmlArabic":"يسمح React 19 بتمرير المراجع مع أي اسم دعامة وتطبيقها مباشرة على العناصر - لا<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">forwardRef</code> ضروري."},"mdHtml":"ال<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">ref</code> سيتم ربطها بشكل صحيح بعنصر إدخال .","mdHtmlArabic":"ال<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">ref</code> سيتم ربطها بشكل صحيح بعنصر إدخال ."},{"text":"Nothing will be rendered.","id":"YOLgPKOGXTigFSg2akknB","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"لن يتم تقديم أي شيء.","mdHtmlArabic":"لن يتم تقديم أي شيء."}],"multipleAnswers":false,"questionTextHtml":"ماذا يحدث عندما يتم تقديم هذا المكون؟<pre style=\";text-align:right;direction:rtl\"><code class=\"language-jsx\" style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">function App() {\n const inputRef = useRef();\n return <FancyInput inputRef={inputRef} />;\n}\n\nfunction FancyInput({ inputRef }) {\n return <input ref={inputRef} />;\n}\n\nexport default App\n</code></pre>","questionTextHtmlArabic":"ماذا يحدث عندما يتم تقديم هذا المكون؟<pre style=\";text-align:right;direction:rtl\"><code class=\"language-jsx\" style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">function App() {\n const inputRef = useRef();\n return <FancyInput inputRef={inputRef} />;\n}\n\nfunction FancyInput({ inputRef }) {\n return <input ref={inputRef} />;\n}\n\nexport default App\n</code></pre>"},{"id":"f6P1untKYw-mvafJOCzgL","questionText":"What happens when the component unmounts?\n```jsx\nfunction App() {\n return (\n <div\n ref={(node) => {\n if (!node) return;\n const id = setInterval(() => console.log('Running'), 1000);\n return () => clearInterval(id);\n }}\n >\n Running task...\n </div>\n );\n}\n```","questionOptions":[{"text":"The interval will continue running.","id":"5-cLgPClWBofmX76wRRbh","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"سوف يستمر الفاصل الزمني في العمل.","mdHtmlArabic":"سوف يستمر الفاصل الزمني في العمل."},{"text":"The interval will be cleared automatically.","id":"OYOuDEyehH9I9hO6jh7XV","correct":true,"explanation":{"mdText":"The cleanup function returned from the ref callback clears the interval when the component unmounts or the node changes.","mdHtml":"تقوم وظيفة التنظيف التي تم إرجاعها من رد نداء المرجع بمسح الفاصل الزمني عندما يتم إلغاء تحميل المكون أو تغيير العقدة.","mdHtmlArabic":"تقوم وظيفة التنظيف التي تم إرجاعها من رد نداء المرجع بمسح الفاصل الزمني عندما يتم إلغاء تحميل المكون أو تغيير العقدة."},"mdHtml":"سيتم مسح الفاصل الزمني تلقائيًا.","mdHtmlArabic":"سيتم مسح الفاصل الزمني تلقائيًا."},{"text":"An error will be thrown.","id":"WMsaRVBY9u5U4uexdnJMG","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"سيتم طرح خطأ.","mdHtmlArabic":"سيتم طرح خطأ."},{"text":"The cleanup will only happen if `useEffect` is used.","id":"bdFVGiZcajiIXt_HZap66","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"لن يتم التنظيف إلا إذا<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">useEffect</code> يتم استخدامه.","mdHtmlArabic":"لن يتم التنظيف إلا إذا<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">useEffect</code> يتم استخدامه."}],"multipleAnswers":false,"questionTextHtml":"ماذا يحدث عند إلغاء تثبيت المكون؟<pre style=\";text-align:right;direction:rtl\"><code class=\"language-jsx\" style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">function App() {\n return (\n <div\n ref={(node) => {\n if (!node) return;\n const id = setInterval(() => console.log('Running'), 1000);\n return () => clearInterval(id);\n }}\n >\n Running task...\n </div>\n );\n}\n</code></pre>","questionTextHtmlArabic":"ماذا يحدث عند إلغاء تثبيت المكون؟<pre style=\";text-align:right;direction:rtl\"><code class=\"language-jsx\" style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">function App() {\n return (\n <div\n ref={(node) => {\n if (!node) return;\n const id = setInterval(() => console.log('Running'), 1000);\n return () => clearInterval(id);\n }}\n >\n Running task...\n </div>\n );\n}\n</code></pre>"},{"id":"SIL7fkCcIMujlxnKv0eXi","questionText":"What is rendered for the following?\n```jsx\nfunction RoleValue() {\n return 'admin';\n}\n\nfunction App() {\n return (\n <RoleContext.Provider value={<RoleValue />}>\n <Dashboard />\n </RoleContext.Provider>\n );\n}\n\nfunction Dashboard() {\n const role = useContext(RoleContext);\n return {role};\n}\n```","questionOptions":[{"text":"`admin`","id":"mx1jZiyGg1MnmwacbTI8W","correct":true,"explanation":{"mdText":"`<RoleValue />` returns `'admin'`, which becomes the context value.","mdHtml":"<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><RoleValue /></code>العائدات<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">'admin'</code> ، والتي تصبح قيمة السياق.","mdHtmlArabic":"<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><RoleValue /></code>العائدات<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">'admin'</code> ، والتي تصبح قيمة السياق."},"mdHtml":"<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">admin</code>","mdHtmlArabic":"<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">admin</code>"},{"text":"`<RoleValue />`","id":"Cu6HzEx1H10ZtCwmsy2FF","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><RoleValue /></code>","mdHtmlArabic":"<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><RoleValue /></code>"},{"text":"`undefined`","id":"RFqYarK5upDlHEHRMCZSB","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">undefined</code>","mdHtmlArabic":"<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">undefined</code>"},{"text":"Nothing","id":"YxPGDyr3iXoQGQvbaMejc","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"لا شئ","mdHtmlArabic":"لا شئ"}],"multipleAnswers":false,"questionTextHtml":"ما هو المقصود بالآتي؟<pre style=\";text-align:right;direction:rtl\"><code class=\"language-jsx\" style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">function RoleValue() {\n return 'admin';\n}\n\nfunction App() {\n return (\n <RoleContext.Provider value={<RoleValue />}>\n <Dashboard />\n </RoleContext.Provider>\n );\n}\n\nfunction Dashboard() {\n const role = useContext(RoleContext);\n return {role};\n}\n</code></pre>","questionTextHtmlArabic":"ما هو المقصود بالآتي؟<pre style=\";text-align:right;direction:rtl\"><code class=\"language-jsx\" style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">function RoleValue() {\n return 'admin';\n}\n\nfunction App() {\n return (\n <RoleContext.Provider value={<RoleValue />}>\n <Dashboard />\n </RoleContext.Provider>\n );\n}\n\nfunction Dashboard() {\n const role = useContext(RoleContext);\n return {role};\n}\n</code></pre>"},{"id":"olpGkgGtN8YKeGFuiern_","questionText":"What happens when this component is rendered?\n```jsx\nfunction Page() {\n return (\n <>\n <title>My Page

f:[["$","$L123",null,{"props":{"lessonContent":{"components":[{"type":"Quiz","mode":"edit","content":{"version":"1.0","title":"","renderMode":"slide","dynamicQuestionsCount":"","questions":[{"questionText":"What best describes the advantage of using `ref` as a prop in React 19?","questionOptions":[{"text":"It removes the need for `useRef` altogether.","id":"GFw-1XQH6msbuOyG4LMb9","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

فهو يزيل الحاجة إلىuseRef تماما.

","mdHtmlArabic":"

فهو يزيل الحاجة إلىuseRef تماما.

"},{"text":"It allows refs to be passed without using `forwardRef` and applied like regular props.","id":"DIA1-eHl4NIJgie5NCvf-","correct":true,"explanation":{"mdText":"React 19 allows you to pass a `ref` as a regular named prop (e.g., `inputRef`), and apply it directly to a DOM element without needing `forwardRef`, making components simpler and cleaner.","mdHtml":"

يتيح لك React 19 تمريرref كدعامة اسمية منتظمة (على سبيل المثال،inputRef )، وتطبيقه مباشرة على عنصر DOM دون الحاجة إلىforwardRef ، مما يجعل المكونات أبسط وأنظف.

","mdHtmlArabic":"

"},"mdHtml":"

يسمح بمرور المراجع دون استخدامforwardRef ويتم تطبيقها مثل الدعائم العادية.

","mdHtmlArabic":"

يسمح بمرور المراجع دون استخدامforwardRef ويتم تطبيقها مثل الدعائم العادية.

"},{"text":"It forces all refs to be named `refProp`.","id":"2fZ0PPrsJnuSmR49cSolt","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

إنه يفرض تسمية جميع المراجعrefProp .

","mdHtmlArabic":"

إنه يفرض تسمية جميع المراجعrefProp .

"},{"text":"It only works with class components.","id":"Y1OwCwMtCLiviTl-9ol0F","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

إنه يعمل فقط مع مكونات الفئة.

","mdHtmlArabic":"

إنه يعمل فقط مع مكونات الفئة.

"}],"id":"0_question_0","questionTextHtml":"

ما هو أفضل وصف لميزة استخدامref كدعامة في React 19؟

","questionTextHtmlArabic":"

ما هو أفضل وصف لميزة استخدامref كدعامة في React 19؟

"},{"id":"MaR2j0_9Ap5877FSBUAy6","questionText":"When using a cleanup function in a ref callback, when does React execute this function?","questionOptions":[{"text":"On every render","id":"rhIWZ9O2d07gj0wLIKWJ0","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

في كل عرض

","mdHtmlArabic":"

في كل عرض

"},{"text":"Only on the initial mount","id":"jlrlMMo0YkWZ6k7ABqArE","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

فقط على التركيب الأولي

","mdHtmlArabic":"

فقط على التركيب الأولي

"},{"text":"When the component unmounts or the ref changes","id":"P7YdjCt7gniJpcGczkhld","correct":true,"explanation":{"mdText":"The cleanup function returned from a ref callback in React 19 runs either when the component unmounts or the ref is reassigned to a different node.","mdHtml":"

يتم تشغيل وظيفة التنظيف التي تم إرجاعها من رد نداء مرجع في React 19 إما عندما يتم إلغاء تحميل المكون أو عند إعادة تعيين المرجع إلى عقدة مختلفة.

","mdHtmlArabic":"

"},"mdHtml":"

عندما يتم إلغاء تحميل المكون أو تغيير المرجع

","mdHtmlArabic":"

عندما يتم إلغاء تحميل المكون أو تغيير المرجع

"},{"text":"After a time-out of 1000 ms","id":"9wyVznYb1lGLFTVclDZ7Q","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

بعد انتهاء المهلة الزمنية البالغة 1000 مللي ثانية

","mdHtmlArabic":"

بعد انتهاء المهلة الزمنية البالغة 1000 مللي ثانية

"}],"multipleAnswers":false,"questionTextHtml":"

عند استخدام دالة التنظيف في رد نداء المرجع، متى يقوم React بتنفيذ هذه الدالة؟

","questionTextHtmlArabic":"

عند استخدام دالة التنظيف في رد نداء المرجع، متى يقوم React بتنفيذ هذه الدالة؟

"},{"id":"OIEhy3s9rnms6DOaUoxPA","questionText":"Which statement is *true* about using a component as a context value in React 19?","questionOptions":[{"text":"The component is ignored and a warning is thrown.","id":"Ck0HlZVmF1uEWXFad-1bd","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

يتم تجاهل المكون ويتم طرح تحذير.

","mdHtmlArabic":"

يتم تجاهل المكون ويتم طرح تحذير.

"},{"text":"The component is rendered outside the tree.","id":"iCPZ3K9m3bZ1bAmX3trfs","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

يتم عرض المكون خارج الشجرة.

","mdHtmlArabic":"

يتم عرض المكون خارج الشجرة.

"},{"text":"The return value of the component becomes the context value.","id":"StXORyCMPJ3pfidtoMtM2","correct":true,"explanation":{"mdText":"React 19 lets you pass a component as the `value` to a provider, and uses that component’s return value as the actual context value.","mdHtml":"

يتيح لك React 19 تمرير مكون كـvalue إلى مزود، ويستخدم قيمة إرجاع هذا المكون قيمة سياق فعلية.

","mdHtmlArabic":"

يتيح لك React 19 تمرير مكون كـvalue إلى مزود، ويستخدم قيمة إرجاع هذا المكون قيمة سياق فعلية.

"},"mdHtml":"

تصبح قيمة الإرجاع للمكون هي قيمة السياق.

","mdHtmlArabic":"

تصبح قيمة الإرجاع للمكون هي قيمة السياق.

"},{"text":"The context becomes unusable in children.","id":"B_4Q6-g1a-Xjh62DuUhLY","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

يصبح السياق غير قابل للاستخدام عند الأطفال.

","mdHtmlArabic":"

يصبح السياق غير قابل للاستخدام عند الأطفال.

"}],"multipleAnswers":false,"questionTextHtml":"

ما هي العبارة صحيح حول استخدام مكون قيمة سياق في React 19؟

","questionTextHtmlArabic":"

ما هي العبارة صحيح حول استخدام مكون قيمة سياق في React 19؟

"},{"id":"oPgmfMXfc3vEyXSpwu6Nr","questionText":"In React 19, how is the `` tag handled when declared in a component?","questionOptions":[{"text":"It is rendered in the body as part of the visible DOM.","id":"arGyJdgZdyuGeTwrdQ3Nd","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"يتم تقديمه في الجسم كجزء من DOM المرئي.","mdHtmlArabic":"يتم تقديمه في الجسم كجزء من DOM المرئي."},{"text":"It is ignored and must still be set with `document.title`.","id":"vyOh4GPrxh1TOed-ynyBL","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"يتم تجاهله ويجب أن يظل مضبوطًا<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">document.title</code> .","mdHtmlArabic":"يتم تجاهله ويجب أن يظل مضبوطًا<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">document.title</code> ."},{"text":"It only works with class components.","id":"ysYAfMskYfnv_iWfWkVxo","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"إنه يعمل فقط مع مكونات الفئة.","mdHtmlArabic":"إنه يعمل فقط مع مكونات الفئة."},{"text":"React moves it into the `<head>` automatically.","id":"eij8wQlP2W52CyXwCUxjl","correct":true,"explanation":{"mdText":"React 19 extracts `<title>` and other metadata tags from the JSX and automatically inserts them into the document `<head>`.","mdHtml":"مقتطفات React 19<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><title></code> وعلامات البيانات الوصفية الأخرى من JSX وإدراجها تلقائيًا في المستند<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><head></code> .","mdHtmlArabic":"مقتطفات React 19<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><title></code> وعلامات البيانات الوصفية الأخرى من JSX وإدراجها تلقائيًا في المستند<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><head></code> ."},"mdHtml":"يحركه React إلى<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><head></code> تلقائيا.","mdHtmlArabic":"يحركه React إلى<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><head></code> تلقائيا."}],"multipleAnswers":false,"questionTextHtml":"في React 19، كيف يتم<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><title></code> العلامة التي تم التعامل معها عند إعلانها في مكون؟","questionTextHtmlArabic":"في React 19، كيف يتم<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><title></code> العلامة التي تم التعامل معها عند إعلانها في مكون؟"},{"id":"uem9pCSK3ADvtrHElbjH5","questionText":"Which script-related behavior is correctly handled by React 19’s declarative `<script>` support?","questionOptions":[{"text":"Scripts are always placed at the bottom of the body.","id":"RsQ1tKpg5WyfZCGp2QpDP","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"يتم وضع النصوص دائمًا في أسفل النص.","mdHtmlArabic":"يتم وضع النصوص دائمًا في أسفل النص."},{"text":"Scripts with `async` or `defer` are injected into `<head>` and cleaned up on unmount.","id":"ePdD7Qx51U5zLO2pfWagQ","correct":true,"explanation":{"mdText":"React 19 allows declarative script loading in JSX, including `async`, `defer`, and other attributes. The script is cleaned up when the component unmounts.","mdHtml":"يسمح React 19 بتحميل البرنامج النصي التصريحي في JSX، بما في ذلك<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">async</code> ،<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">defer</code> ، وسمات أخرى. يتم تنظيف البرنامج النصي عند إلغاء تحميل المكون.","mdHtmlArabic":"يسمح React 19 بتحميل البرنامج النصي التصريحي في JSX، بما في ذلك<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">async</code> ،<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">defer</code> ، وسمات أخرى. يتم تنظيف البرنامج النصي عند إلغاء تحميل المكون."},"mdHtml":"البرامج النصية مع<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">async</code> أو<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">defer</code> يتم حقنها في<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><head></code> وتم تنظيفها عند إلغاء التثبيت.","mdHtmlArabic":"البرامج النصية مع<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">async</code> أو<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">defer</code> يتم حقنها في<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><head></code> وتم تنظيفها عند إلغاء التثبيت."},{"text":"Scripts are run twice for hydration safety.","id":"9YmKuiQxEKdIj-tKMhcIU","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"يتم تشغيل البرامج النصية مرتين لضمان سلامة الترطيب.","mdHtmlArabic":"يتم تشغيل البرامج النصية مرتين لضمان سلامة الترطيب."},{"text":"Scripts cannot be removed after being inserted.","id":"jidl0MiVBvWrPsA9n-bwJ","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"لا يمكن إزالة البرامج النصية بعد إدراجها.","mdHtmlArabic":"لا يمكن إزالة البرامج النصية بعد إدراجها."}],"multipleAnswers":false,"questionTextHtml":"ما هو السلوك المرتبط بالنص البرمجي الذي يتم التعامل معه بشكل صحيح بواسطة إعلان React 19؟<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><script></code> يدعم؟","questionTextHtmlArabic":"ما هو السلوك المرتبط بالنص البرمجي الذي يتم التعامل معه بشكل صحيح بواسطة إعلان React 19؟<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><script></code> يدعم؟"},{"id":"Ns2_SVDtEMg9KGo7SuwW3","questionText":"**(True or False)** Passing a ref as a prop in React 19 still requires the use of `forwardRef`.","questionOptions":[{"text":"True","id":"SdGq2tX9zG4t62dvhT6IC","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"حقيقي","mdHtmlArabic":"حقيقي"},{"text":"False","id":"-l8enqBKSDtfzfk0KIYo4","correct":true,"explanation":{"mdText":"React 19 allows refs to be passed as regular props, so `forwardRef` is only needed when exposing imperative methods.","mdHtml":"يسمح React 19 بتمرير المراجع كدعامات عادية، لذا<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">forwardRef</code> لا تكون هناك حاجة إليها إلا عند عرض الأساليب الآمرة.","mdHtmlArabic":"يسمح React 19 بتمرير المراجع كدعامات عادية، لذا<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">forwardRef</code> لا تكون هناك حاجة إليها إلا عند عرض الأساليب الآمرة."},"mdHtml":"خطأ شنيع","mdHtmlArabic":"خطأ شنيع"}],"multipleAnswers":false,"questionTextHtml":"(صواب أو خطأ) لا يزال تمرير مرجع كدعامة في React 19 يتطلب استخدام<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">forwardRef</code> .","questionTextHtmlArabic":"(صواب أو خطأ) لا يزال تمرير مرجع كدعامة في React 19 يتطلب استخدام<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">forwardRef</code> ."},{"id":"_dJAj8gbXdfIZVL8w5T7R","questionText":"**(True or False)** In React 19, cleanup functions returned from a ref callback can fully replace the need for `useEffect` in some cases.","questionOptions":[{"text":"True","id":"UJT-_0-v3qh0RZfopLsuU","correct":true,"explanation":{"mdText":"Ref callback cleanup can manage DOM event listeners, timers, or subscriptions without needing `useEffect`.","mdHtml":"يمكن لعملية تنظيف رد نداء المرجع إدارة مستمعي أحداث DOM أو المؤقتات أو الاشتراكات دون الحاجة إلى<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">useEffect</code> .","mdHtmlArabic":"يمكن لعملية تنظيف رد نداء المرجع إدارة مستمعي أحداث DOM أو المؤقتات أو الاشتراكات دون الحاجة إلى<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">useEffect</code> ."},"mdHtml":"حقيقي","mdHtmlArabic":"حقيقي"},{"text":"False","id":"Wqr2RH5btFcKgIrmYNClj","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"خطأ شنيع","mdHtmlArabic":"خطأ شنيع"}],"multipleAnswers":false,"questionTextHtml":"(صواب أو خطأ) في React 19، يمكن لوظائف التنظيف التي يتم إرجاعها من رد نداء مرجعي أن تحل محل الحاجة إلى<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">useEffect</code> في بعض الحالات.","questionTextHtmlArabic":"(صواب أو خطأ) في React 19، يمكن لوظائف التنظيف التي يتم إرجاعها من رد نداء مرجعي أن تحل محل الحاجة إلى<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">useEffect</code> في بعض الحالات."},{"id":"p3t3Se0POGqzRkxrFz4ZZ","questionText":"**(True or False)** In React 19, you can use a functional component directly as a context provider’s `value`.","questionOptions":[{"text":"True","id":"BgNxxWpSFzEZyvGlpJjuG","correct":true,"explanation":{"mdText":"The rendered value of the functional component is passed to all consumers of that context.","mdHtml":"يتم تمرير قيمة المقدمة للمكون الوظيفي إلى جميع مستهلكي هذا السياق.","mdHtmlArabic":"يتم تمرير قيمة المقدمة للمكون الوظيفي إلى جميع مستهلكي هذا السياق."},"mdHtml":"حقيقي","mdHtmlArabic":"حقيقي"},{"text":"False","id":"irI2qO8Fx5uOb5qspBU1-","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"خطأ شنيع","mdHtmlArabic":"خطأ شنيع"}],"multipleAnswers":false,"questionTextHtml":"(صواب أو خطأ) في React 19، يمكنك استخدام مكون وظيفي بشكل مباشر كمزود سياق<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">value</code> .","questionTextHtmlArabic":"(صواب أو خطأ) في React 19، يمكنك استخدام مكون وظيفي بشكل مباشر كمزود سياق<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">value</code> ."},{"id":"mADP0QLQnT8_P1fUZkOFN","questionText":"**(True or False)** React 19 supports setting document metadata like `<title>` and `<meta>` by directly writing them inside JSX.","questionOptions":[{"text":"True","id":"CYh3Ibq2h7bfK24S4Y6GO","correct":true,"explanation":{"mdText":"These tags are recognized and moved to the document head automatically during rendering.","mdHtml":"يتم التعرف على هذه العلامات ونقلها إلى رأس المستند تلقائيًا أثناء العرض.","mdHtmlArabic":"يتم التعرف على هذه العلامات ونقلها إلى رأس المستند تلقائيًا أثناء العرض."},"mdHtml":"حقيقي","mdHtmlArabic":"حقيقي"},{"text":"False","id":"lZXytM3StJhjnt1_7osBj","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"خطأ شنيع","mdHtmlArabic":"خطأ شنيع"}],"multipleAnswers":false,"questionTextHtml":"(صواب أو خطأ) يدعم React 19 إعداد بيانات تعريف المستند مثل<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><title></code> و<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><meta></code> عن طريق كتابتها مباشرة داخل JSX.","questionTextHtmlArabic":"(صواب أو خطأ) يدعم React 19 إعداد بيانات تعريف المستند مثل<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><title></code> و<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><meta></code> عن طريق كتابتها مباشرة داخل JSX."},{"id":"O7__Q6Tf4jAuQ15uqoiFB","questionText":"**(True or False)** React 19’s support for `<script>` in JSX only works for inline scripts,. not external sources.","questionOptions":[{"text":"True","id":"NdQQh9_8yFmxVXbKbINp5","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"حقيقي","mdHtmlArabic":"حقيقي"},{"text":"False","id":"ZfqqQuKvpoyKwKuhlAmS9","correct":true,"explanation":{"mdText":"React 19 allows loading both inline and external scripts using the `<script>` tag in JSX.","mdHtml":"يتيح React 19 تحميل البرامج النصية المضمنة والخارجية باستخدام<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><script></code> العلامة في JSX.","mdHtmlArabic":"يتيح React 19 تحميل البرامج النصية المضمنة والخارجية باستخدام<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><script></code> العلامة في JSX."},"mdHtml":"خطأ شنيع","mdHtmlArabic":"خطأ شنيع"}],"multipleAnswers":false,"questionTextHtml":"(صواب أو خطأ) دعم React 19 لـ<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><script></code> في JSX يعمل فقط مع البرامج النصية المضمنة، وليس المصادر الخارجية.","questionTextHtmlArabic":"(صواب أو خطأ) دعم React 19 لـ<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><script></code> في JSX يعمل فقط مع البرامج النصية المضمنة، وليس المصادر الخارجية."},{"id":"t7ESX-2Ac-myBSr6E9cmv","questionText":"What happens when this component is rendered?\n```jsx\nfunction App() {\n const inputRef = useRef();\n return <FancyInput inputRef={inputRef} />;\n}\n\nfunction FancyInput({ inputRef }) {\n return <input ref={inputRef} />;\n}\n\nexport default App\n```","questionOptions":[{"text":"The input will not be focusable.","id":"K7Xob0sU1C1li1p70Pbip","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"لن يكون من الممكن التركيز على إدخال .","mdHtmlArabic":"لن يكون من الممكن التركيز على إدخال ."},{"text":"An error will be thrown because `ref` must be called `ref`.","id":"6S3nNX715AyfzsCgY5RHU","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"سيتم طرح خطأ بسبب<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">ref</code> يجب أن يتم استدعاؤه<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">ref</code> .","mdHtmlArabic":"سيتم طرح خطأ بسبب<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">ref</code> يجب أن يتم استدعاؤه<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">ref</code> ."},{"text":"The `ref` will be correctly attached to the input element.","id":"M6GDpFj6HKvdUY6ePWKCf","correct":true,"explanation":{"mdText":"React 19 allows refs to be passed with any prop name and applied directly to elements—no `forwardRef` needed.","mdHtml":"يسمح React 19 بتمرير المراجع مع أي اسم دعامة وتطبيقها مباشرة على العناصر - لا<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">forwardRef</code> ضروري.","mdHtmlArabic":"يسمح React 19 بتمرير المراجع مع أي اسم دعامة وتطبيقها مباشرة على العناصر - لا<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">forwardRef</code> ضروري."},"mdHtml":"ال<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">ref</code> سيتم ربطها بشكل صحيح بعنصر إدخال .","mdHtmlArabic":"ال<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">ref</code> سيتم ربطها بشكل صحيح بعنصر إدخال ."},{"text":"Nothing will be rendered.","id":"YOLgPKOGXTigFSg2akknB","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"لن يتم تقديم أي شيء.","mdHtmlArabic":"لن يتم تقديم أي شيء."}],"multipleAnswers":false,"questionTextHtml":"ماذا يحدث عندما يتم تقديم هذا المكون؟<pre style=\";text-align:right;direction:rtl\"><code class=\"language-jsx\" style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">function App() {\n const inputRef = useRef();\n return <FancyInput inputRef={inputRef} />;\n}\n\nfunction FancyInput({ inputRef }) {\n return <input ref={inputRef} />;\n}\n\nexport default App\n</code></pre>","questionTextHtmlArabic":"ماذا يحدث عندما يتم تقديم هذا المكون؟<pre style=\";text-align:right;direction:rtl\"><code class=\"language-jsx\" style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">function App() {\n const inputRef = useRef();\n return <FancyInput inputRef={inputRef} />;\n}\n\nfunction FancyInput({ inputRef }) {\n return <input ref={inputRef} />;\n}\n\nexport default App\n</code></pre>"},{"id":"f6P1untKYw-mvafJOCzgL","questionText":"What happens when the component unmounts?\n```jsx\nfunction App() {\n return (\n <div\n ref={(node) => {\n if (!node) return;\n const id = setInterval(() => console.log('Running'), 1000);\n return () => clearInterval(id);\n }}\n >\n Running task...\n </div>\n );\n}\n```","questionOptions":[{"text":"The interval will continue running.","id":"5-cLgPClWBofmX76wRRbh","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"سوف يستمر الفاصل الزمني في العمل.","mdHtmlArabic":"سوف يستمر الفاصل الزمني في العمل."},{"text":"The interval will be cleared automatically.","id":"OYOuDEyehH9I9hO6jh7XV","correct":true,"explanation":{"mdText":"The cleanup function returned from the ref callback clears the interval when the component unmounts or the node changes.","mdHtml":"تقوم وظيفة التنظيف التي تم إرجاعها من رد نداء المرجع بمسح الفاصل الزمني عندما يتم إلغاء تحميل المكون أو تغيير العقدة.","mdHtmlArabic":"تقوم وظيفة التنظيف التي تم إرجاعها من رد نداء المرجع بمسح الفاصل الزمني عندما يتم إلغاء تحميل المكون أو تغيير العقدة."},"mdHtml":"سيتم مسح الفاصل الزمني تلقائيًا.","mdHtmlArabic":"سيتم مسح الفاصل الزمني تلقائيًا."},{"text":"An error will be thrown.","id":"WMsaRVBY9u5U4uexdnJMG","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"سيتم طرح خطأ.","mdHtmlArabic":"سيتم طرح خطأ."},{"text":"The cleanup will only happen if `useEffect` is used.","id":"bdFVGiZcajiIXt_HZap66","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"لن يتم التنظيف إلا إذا<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">useEffect</code> يتم استخدامه.","mdHtmlArabic":"لن يتم التنظيف إلا إذا<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">useEffect</code> يتم استخدامه."}],"multipleAnswers":false,"questionTextHtml":"ماذا يحدث عند إلغاء تثبيت المكون؟<pre style=\";text-align:right;direction:rtl\"><code class=\"language-jsx\" style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">function App() {\n return (\n <div\n ref={(node) => {\n if (!node) return;\n const id = setInterval(() => console.log('Running'), 1000);\n return () => clearInterval(id);\n }}\n >\n Running task...\n </div>\n );\n}\n</code></pre>","questionTextHtmlArabic":"ماذا يحدث عند إلغاء تثبيت المكون؟<pre style=\";text-align:right;direction:rtl\"><code class=\"language-jsx\" style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">function App() {\n return (\n <div\n ref={(node) => {\n if (!node) return;\n const id = setInterval(() => console.log('Running'), 1000);\n return () => clearInterval(id);\n }}\n >\n Running task...\n </div>\n );\n}\n</code></pre>"},{"id":"SIL7fkCcIMujlxnKv0eXi","questionText":"What is rendered for the following?\n```jsx\nfunction RoleValue() {\n return 'admin';\n}\n\nfunction App() {\n return (\n <RoleContext.Provider value={<RoleValue />}>\n <Dashboard />\n </RoleContext.Provider>\n );\n}\n\nfunction Dashboard() {\n const role = useContext(RoleContext);\n return {role};\n}\n```","questionOptions":[{"text":"`admin`","id":"mx1jZiyGg1MnmwacbTI8W","correct":true,"explanation":{"mdText":"`<RoleValue />` returns `'admin'`, which becomes the context value.","mdHtml":"<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><RoleValue /></code>العائدات<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">'admin'</code> ، والتي تصبح قيمة السياق.","mdHtmlArabic":"<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><RoleValue /></code>العائدات<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">'admin'</code> ، والتي تصبح قيمة السياق."},"mdHtml":"<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">admin</code>","mdHtmlArabic":"<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">admin</code>"},{"text":"`<RoleValue />`","id":"Cu6HzEx1H10ZtCwmsy2FF","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><RoleValue /></code>","mdHtmlArabic":"<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\"><RoleValue /></code>"},{"text":"`undefined`","id":"RFqYarK5upDlHEHRMCZSB","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">undefined</code>","mdHtmlArabic":"<code style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">undefined</code>"},{"text":"Nothing","id":"YxPGDyr3iXoQGQvbaMejc","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"لا شئ","mdHtmlArabic":"لا شئ"}],"multipleAnswers":false,"questionTextHtml":"ما هو المقصود بالآتي؟<pre style=\";text-align:right;direction:rtl\"><code class=\"language-jsx\" style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">function RoleValue() {\n return 'admin';\n}\n\nfunction App() {\n return (\n <RoleContext.Provider value={<RoleValue />}>\n <Dashboard />\n </RoleContext.Provider>\n );\n}\n\nfunction Dashboard() {\n const role = useContext(RoleContext);\n return {role};\n}\n</code></pre>","questionTextHtmlArabic":"ما هو المقصود بالآتي؟<pre style=\";text-align:right;direction:rtl\"><code class=\"language-jsx\" style=\"text-align:right;direction:ltr;unicode-bidi:bidi-override;\">function RoleValue() {\n return 'admin';\n}\n\nfunction App() {\n return (\n <RoleContext.Provider value={<RoleValue />}>\n <Dashboard />\n </RoleContext.Provider>\n );\n}\n\nfunction Dashboard() {\n const role = useContext(RoleContext);\n return {role};\n}\n</code></pre>"},{"id":"olpGkgGtN8YKeGFuiern_","questionText":"What happens when this component is rendered?\n```jsx\nfunction Page() {\n return (\n <>\n <title>My Page\n \n \n );\n}\n```","questionOptions":[{"text":"Nothing, these tags are ignored in JSX.","id":"GRmupmGG7Bvb3_4zwW73f","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

Build a Doctor Appointment Booking System Using the MERN Stack

اختبار: تحسينات React 19