- 103
- 6 443
Arab Developers
เข้าร่วมเมื่อ 4 ม.ค. 2021
This channel aims to provide a complete path for every Arab developer who wants to start in the field of programming and learn the web path for free
14- React Keys Explained: Why Unique Keys Matter for State & Performance
🚀 Why Are Unique Keys in React So Important? You might have used key in React lists, but do you really understand its impact on state, re-renders, and performance?
In this video, we dive deep into why unique keys matter and what happens if you don’t use them correctly. We’ll cover:
✅ What is a React key?
✅ The consequences of missing or duplicate keys.
✅ How improper keys break component state.
✅ Best practices for using keys in dynamic lists.
💡 Example: Common Mistakes vs. Correct Approach
We’ll demonstrate the unexpected UI bugs that arise when React misidentifies list items due to key issues-and how to fix them properly!
By the end of this video, you'll have a clear understanding of how keys influence re-renders and how to optimize your React components efficiently.
🔥 Don't forget to LIKE 👍, COMMENT 💬, and SUBSCRIBE 🔔 for more in-depth React tutorials!
#React #ReactJS #WebDevelopment #Frontend #ReactKeys #StateManagement #coding
🚀 لماذا تعتبر المفاتيح الفريدة في React مهمة جدًا؟ ربما استخدمت key في قوائم React من قبل، لكن هل تفهم حقًا تأثيرها على الحالة (state)، وإعادة التصيير (re-render)، والأداء؟
في هذا الفيديو، سنشرح بالتفصيل لماذا تحتاج المفاتيح لأن تكون فريدة وما الذي قد يحدث إذا لم تُستخدم بشكل صحيح. سنتحدث عن:
✅ ما هي المفاتيح (keys) في React؟
✅ المشاكل الناتجة عن عدم وجود مفتاح أو تكرار المفاتيح.
✅ كيف تؤثر المفاتيح غير الصحيحة على حالة المكونات (state).
✅ أفضل الممارسات لاستخدام المفاتيح في القوائم الديناميكية.
💡 مثال: أخطاء شائعة مقابل الحل الصحيح
سنوضح المشاكل غير المتوقعة في الواجهة عندما يفشل React في التعرف على العناصر بسبب المفاتيح، وسنعرض كيفية حلها بالطريقة الصحيحة!
📌 بنهاية هذا الفيديو، ستفهم جيدًا كيف تؤثر المفاتيح على إعادة التصيير، وكيف يمكنك تحسين أداء مكونات React بشكل فعال.
🔥 لا تنسَ الإعجاب 👍، والتعليق 💬، والاشتراك 🔔 لدعم القناة ومشاهدة المزيد من دروس React المتقدمة!
#React #ReactJS #تطوير_ويب #فرونت_إند #مفاتيح_React #إدارة_الحالة #برمجة
In this video, we dive deep into why unique keys matter and what happens if you don’t use them correctly. We’ll cover:
✅ What is a React key?
✅ The consequences of missing or duplicate keys.
✅ How improper keys break component state.
✅ Best practices for using keys in dynamic lists.
💡 Example: Common Mistakes vs. Correct Approach
We’ll demonstrate the unexpected UI bugs that arise when React misidentifies list items due to key issues-and how to fix them properly!
By the end of this video, you'll have a clear understanding of how keys influence re-renders and how to optimize your React components efficiently.
🔥 Don't forget to LIKE 👍, COMMENT 💬, and SUBSCRIBE 🔔 for more in-depth React tutorials!
#React #ReactJS #WebDevelopment #Frontend #ReactKeys #StateManagement #coding
🚀 لماذا تعتبر المفاتيح الفريدة في React مهمة جدًا؟ ربما استخدمت key في قوائم React من قبل، لكن هل تفهم حقًا تأثيرها على الحالة (state)، وإعادة التصيير (re-render)، والأداء؟
في هذا الفيديو، سنشرح بالتفصيل لماذا تحتاج المفاتيح لأن تكون فريدة وما الذي قد يحدث إذا لم تُستخدم بشكل صحيح. سنتحدث عن:
✅ ما هي المفاتيح (keys) في React؟
✅ المشاكل الناتجة عن عدم وجود مفتاح أو تكرار المفاتيح.
✅ كيف تؤثر المفاتيح غير الصحيحة على حالة المكونات (state).
✅ أفضل الممارسات لاستخدام المفاتيح في القوائم الديناميكية.
💡 مثال: أخطاء شائعة مقابل الحل الصحيح
سنوضح المشاكل غير المتوقعة في الواجهة عندما يفشل React في التعرف على العناصر بسبب المفاتيح، وسنعرض كيفية حلها بالطريقة الصحيحة!
📌 بنهاية هذا الفيديو، ستفهم جيدًا كيف تؤثر المفاتيح على إعادة التصيير، وكيف يمكنك تحسين أداء مكونات React بشكل فعال.
🔥 لا تنسَ الإعجاب 👍، والتعليق 💬، والاشتراك 🔔 لدعم القناة ومشاهدة المزيد من دروس React المتقدمة!
#React #ReactJS #تطوير_ويب #فرونت_إند #مفاتيح_React #إدارة_الحالة #برمجة
มุมมอง: 58
วีดีโอ
13-React Keys: What Happens When Adding Items Without Keys vs. With Keys?
มุมมอง 31วันที่ผ่านมา
Timestamps 0:00 - intro 0:55- spread operator 4:29 - what happen when add item without keys 9:44 - what happen when add item using keys 🔹 In this video, we’ll explore how React handles adding new items to a list with and without keys. You’ll learn: ✅ What happens when you don’t use keys (unexpected behavior & issues) ❌ ✅ How React identifies list items and why keys are crucial 🔄 ✅ The differenc...
12-How to Optimize List Reordering & Prevent Extra Re-renders
มุมมอง 45วันที่ผ่านมา
#reactjs #react_keys 🔹 In this video, we continue exploring React Keys and how they affect list reordering and rendering performance. We'll see: ✅ What happens when you reorder a list without using keys 🔄 ✅ The visual difference between using incorrect vs. correct keys 👀 ✅ How unique keys optimize re-renders and improve performance ⚡ ✅ A practical example of adding a unique key to a list for ef...
11-React Keys p2: Visualizing the Impact of Keys on Re-Renders | تحسين الأداء باستخدام Keys في React
มุมมอง 2314 วันที่ผ่านมา
In this video, we dive into React Keys (Part 2) and explore: What happens visually when you don't use keys in lists. The difference in re-render behavior with and without proper keys. How keys help React optimize re-renders and improve performance. Through clear examples, you'll see why using unique and consistent keys is crucial for maintaining efficient UI updates, especially when working wit...
10-React Keys Explained: Why Reordering Lists Without Keys Causes Extra Re-renders
มุมมอง 4214 วันที่ผ่านมา
react level 1 : th-cam.com/video/HGPeeRWviN4/w-d-xo.html react level 2 : th-cam.com/video/jUGTsfQEl5A/w-d-xo.html find me : linkedin : www.linkedin.com/in/mohamed-mostafa-85405a291 facebook : share/19vpwUi9vQ/ In this video, we dive deep into the concept of keys in React and their significance in optimizing performance. Learn: What happens during reordering of lists without using ke...
09-React Lists and Keys Part 1: Map Function with Practical Examples | DRY Principle Explained
มุมมอง 5414 วันที่ผ่านมา
0:00 - Introduction 0:20 - Writing a Use Case Without Using Components 3:46 - Refactoring with Components and Props 6:58 - Using the map() Function to Render Lists react level 1 : th-cam.com/video/HGPeeRWviN4/w-d-xo.html react level 2 : th-cam.com/video/jUGTsfQEl5A/w-d-xo.html find me : linkedin : www.linkedin.com/in/mohamed-mostafa-85405a291 facebook : share/19vpwUi9vQ/ 📂 Get the C...
08- React Conditional Rendering:Practical Example with Copy & Paste | شرح عملي للعرض الشرطي في React
มุมมอง 5914 วันที่ผ่านมา
react level 1 : th-cam.com/video/HGPeeRWviN4/w-d-xo.html react level 2 : th-cam.com/video/jUGTsfQEl5A/w-d-xo.html find me : linkedin : www.linkedin.com/in/mohamed-mostafa-85405a291 facebook : share/19vpwUi9vQ/ code: github.com/mo634/react-level-2/commit/b60f7aee7bbacd92570eefcf36543cc93ef2c736 في هذا الفيديو، نقدم مثالًا عمليًا يشرح كيفية تنفيذ عملية النسخ واللصق باستخدام العرض الشر...
07- Logical AND Operator : Conditional Rendering Explained|شرح React Conditional Rendering
มุมมอง 2721 วันที่ผ่านมา
code : github.com/mo634/react-level-2/commit/575be5202fc4acfcb4ee77d6f4dc959c41f3248f react level 1 : th-cam.com/video/HGPeeRWviN4/w-d-xo.html react level 2 : th-cam.com/video/jUGTsfQEl5A/w-d-xo.html find me : linkedin : www.linkedin.com/in/mohamed-mostafa-85405a291 facebook : share/19vpwUi9vQ/ Today's video is all about how to use the logical AND (&&) operator for conditional rende...
06-Conditional Rendering in React: What is the Ternary Operator? | شرح الشرطية في React مع مثال عملي
มุมมอง 3921 วันที่ผ่านมา
In this video, we’ll explore conditional rendering in React and how the ternary operator can simplify your code. 🚀 📌 What is conditional rendering and why it's important in React? 📌 Introduction to the ternary operator and how it works in JavaScript. 📌 A practical example of using the ternary operator for dynamic UI rendering. Learn to write clean, concise, and efficient code for your React app...
01-React Playlist Intro: What You'll Learn, GitHub Code Access & Study Tips | مقدمة كورس React
มุมมอง 6521 วันที่ผ่านมา
find me : linkedin : www.linkedin.com/in/mohamed-mostafa-85405a291 facebook : share/19vpwUi9vQ/ source code github.com/mo634/react-level-2 react playlist level 1 th-cam.com/video/HGPeeRWviN4/w-d-xo.html Welcome to the React Playlist Level 1! 🚀 In this introduction video, you'll learn: 📌 What this playlist covers - from React basics to advanced concepts. 📌 How to access all the code ...
05-React Basics: Statements vs Expressions & Why JSX Only Accepts Expressions | React شرح الأساسيات
มุมมอง 3921 วันที่ผ่านมา
find me : linkedin : www.linkedin.com/in/mohamed-mostafa-85405a291 facebook : share/19vpwUi9vQ/ code tutorial : modify var direct : github.com/mo634/react-level-2/commit/06aec4398ac83a95ec2ef94376f6e96ab4caa40e expressions VS statements : github.com/mo634/react-level-2/commit/aa50b504564256f2ad8dedfd56cfda56c3dd512b In this video, we dive into the basics you need to know before rend...
04-React States Explained: Usage, Differences from Props & Practical Example | شرح States في React
มุมมอง 3321 วันที่ผ่านมา
find me here : share/19vpwUi9vQ/ www.linkedin.com/in/mohamed-mostafa-85405a291 In this video, we dive deep into React States! 🌟 📌 Learn how to invoke and use states effectively. 📌 Understand the key differences between states and props in React. 📌 Watch a practical example to see states in action and build dynamic components. Whether you're a beginner or brushing up your React skil...
03-React Functional Components: Learn States&Props with a PracticalCounter Example| شرحProps&States
มุมมอง 8528 วันที่ผ่านมา
03-React Functional Components: Learn States&Props with a PracticalCounter Example| شرحProps&States
12-Deep Copy in JavaScript: How It Works & Methods Explained | شرح النسخ العميق في جافاسكريبت
มุมมอง 6128 วันที่ผ่านมา
12-Deep Copy in JavaScript: How It Works & Methods Explained | شرح النسخ العميق في جافاسكريبت
11-Copy in JS P2: Shallow Copy & Reference Copy Explained | شرح النسخ في جافاسكريبت - الجزء الثاني
มุมมอง 61หลายเดือนก่อน
11-Copy in JS P2: Shallow Copy & Reference Copy Explained | شرح النسخ في جافاسكريبت - الجزء الثاني
10- JavaScript Copying Explained: Primitive vs. Non-Primitive, Shallow Copy,Deep Copy&Reference Copy
มุมมอง 36หลายเดือนก่อน
10- JavaScript Copying Explained: Primitive vs. Non-Primitive, Shallow Copy,Deep Copy&Reference Copy
02-Upgrade from React Class Components to Functional Components:Why Functional Components Are Better
มุมมอง 76หลายเดือนก่อน
02-Upgrade from React Class Components to Functional Components:Why Functional Components Are Better
35-React Counter Example P3: Build Dynamic Component with Props, States&Event Handlers|شرح عدادReact
มุมมอง 49หลายเดือนก่อน
35-React Counter Example P3: Build Dynamic Component with Props, States&Event Handlers|شرح عدادReact
34-تصميم واجهة مستخدم للـ Counter باستخدام React | React Counter UI Design Part 2
มุมมอง 42หลายเดือนก่อน
34-تصميم واجهة مستخدم للـ Counter باستخدام React | React Counter UI Design Part 2
33-Practical Example: States, Props, PropTypes & Event Handlers Combined! | شرح عملي React
มุมมอง 37หลายเดือนก่อน
33-Practical Example: States, Props, PropTypes & Event Handlers Combined! | شرح عملي React
32-React Best Practices: Avoid Using div for Click Events | Proper Event Elements Explained
มุมมอง 54หลายเดือนก่อน
32-React Best Practices: Avoid Using div for Click Events | Proper Event Elements Explained
31-React Event Propagation: Bubbling vs Capturing |شرح انتشار الأحداث في React
มุมมอง 42หลายเดือนก่อน
31-React Event Propagation: Bubbling vs Capturing |شرح انتشار الأحداث في React
30-React Props: Passing Functions as Props |بناء كود وإعادة هيكلته باستخدام React
มุมมอง 45หลายเดือนก่อน
30-React Props: Passing Functions as Props |بناء كود وإعادة هيكلته باستخدام React
29-React Props: Passing Props & Handling Events Dynamically | إنشاء مكونات React وتفاعل مع البيانات
มุมมอง 33หลายเดือนก่อน
29-React Props: Passing Props & Handling Events Dynamically | إنشاء مكونات React وتفاعل مع البيانات
28-ReactJS Event Handlers: Pass Parameters to Methods|شرح تمرير بارامترات مع Event Handlers في React
มุมมอง 23หลายเดือนก่อน
28-ReactJS Event Handlers: Pass Parameters to Methods|شرح تمرير بارامترات مع Event Handlers في React
09-Event Propagation in JavaScript Part 2 | شرح Event Propagation
มุมมอง 59หลายเดือนก่อน
09-Event Propagation in JavaScript Part 2 | شرح Event Propagation
08-Javascript Event Propagation: Bubble & Capture Phases P1 | شرح مراحل الـ Events في javascript
มุมมอง 75หลายเดือนก่อน
08-Javascript Event Propagation: Bubble & Capture Phases P1 | شرح مراحل الـ Events في javascript
مايتعلق بالقناة وكروس ال react الفترة القادمة
มุมมอง 29หลายเดือนก่อน
مايتعلق بالقناة وكروس ال react الفترة القادمة
27-React Event Handlers Introduction: How to Handle Events in React | شرح معالجات الأحداث في React
มุมมอง 81หลายเดือนก่อน
27-React Event Handlers Introduction: How to Handle Events in React | شرح معالجات الأحداث في React
07-JavaScript Closures: Full Summary & Revision | شرح Closure في JavaScript مع أمثلة عملية
มุมมอง 39หลายเดือนก่อน
07-JavaScript Closures: Full Summary & Revision | شرح Closure في JavaScript مع أمثلة عملية
استمر في البلاي ياريت المواضيع اللي بتشرحها فعلا مفيدة
شرح جميل يا بشمهندس شكرا يعني ممكن نقول ان قبل وبعد الshuffle ان الريآكش شايفه ان كل الstates واخدين نفس ال signature عشان كده مبيحسش بالshuffle اللي بيحصل
صح اه بس خلينا نقول انه بيقارن بناءا على المكان لو محددتش الkey فال index مش بيتغير وبالتالي الstateمش هتتغير دي أدق على حد علمي البسيط♥️
الله ينور يا هندسه بس كدا بقالنا اربع ايام بدون فيديوهات ده مش اتفاقنا 🤣🤣🤣🤣🤣🤣🤣🤣
والله غصب عني الفترة اللي فاتت ♥️
الله ينور يا هندسه
Thanks
الله ينور يا هندسه
شكرا🎉
ممكن نبقي نشرح يا هندسه ليه لازم نعمل distructering ل state ومينفعش نستخدم معاه مثلا ال method الجاهزه زي pop , unshift,pusuh انا بس فعلا حابب المحتوي ده يبقي مرجع لاي حد يتعلم بعد كدا علشان كدا بؤاجع معاك وسوري علي تعقيبي
@@mohamedramadan6197 لا أطلب براحتك واعدل في محتوى الكورس لان ده الهدف ♥️
@@mohamedramadan6197 حاضر
الله ينور يا هندسه ربما يبارك محتاج منك حاجه لو امكن
تعديل بسيط الدقيقة رقم ١٥ حصل سهو في المصطلحات ال asynch هي اللي بشتغل بالتوازي ال synch هو ال sequantial اللي الكود فيها بيتنفذ Line by Line الشرح تمام بس هنبدل المصطلحين
يا هندسه تقريب انت عكست المفهوم ما بين الاتنين
@@mohamedramadan6197 اه فعلا عكست سهو مني
@@DeepDive312 يا باشا زي الفل كلنا بنراجع مع بعض
جزاكم الله خيرا
ربنا يبارك فيك ❤❤❤ استمررر❤❤
15:48 معلش ي هندسه هوا تقريبا انت عكست بين المسميات ال ( synch هوا المتزامن) انما ال (Asynch ده هوا الغير متزامن ) و شكرا مقدما 🤍🤍
@@Luke1234-s8r انا راجعت الفيديو عندك حق انا فعلا عكست سهو مني
@@DeepDive312 عادي ي هندسه مفيش اي مشاكل 🤍🤍
الله ينور سا هندسه لما شوفت صوره الغيديو ضحكت حسيت انك حططها مخصوص علشان الكومنت بتاع الفيديو اللي فات 😅
لا والله دي صدفة 😂😂
شكرآ لك
الله ينور يا هندسه بس كان المفروض تشرح ال expression بتاع && حتي لو ممكن تعملها في short سريع
شارحها متقلقش كل الموضوع الفيديو بيبقى محتاج شغل مونتاج وصوت وغيره فغصب عني مبنزلش كله
@arabDevelopers312 تسلم يا هندسه
الله ينور يا هندسه برافو
👏👏👏👏
THANKS
الله ينور يا هندسه عايزين اكتر من فيديو كمان في نفس اليوم ده بيعلي الانتشار برضه كمان حاجه اقتراح يعني اتمني مثلا مع كل hooks يتعمل abstraction للهوك نفسه وطريقه عمله وشرح الفنكشن بتاعته ده هيخلي المحتوي جامد لان تقريبا محدش شرحه غير مصادر اجنبي انت عارف انا باجع معاك وبقول ملاحظاتى لاني شايف فعلا المحتوي وطريقه الشرح سهله وبسيطه
والله كل جاي بالتفصيل متقلقش حتى انا في أول الفيديو قولت احنا لسه هنتعمق في كل حاجه قدام بس قبل ماتعمق لازم اشرح الأساس عشان مش كله عنده خلفية زيك وانا مبنزلش اكتر من فيديو غصب عني والله عشان شغلي فاهو الوقت بتاع الصبح ده اللي بعمل فيه كل حاجه وباقي اليوم شغال
Thanks
الله ينور يا هندسه عاش ومبروك علي اللوجو الجديد
الله ينور يا هندسه زي ما احنا متفقين لازم نخلص الكورس بدون تقطيع وصدقني قي يوم المحتور ده هيبقي مرجع لاي حد عايز يبدا في المجال
بإذن الله ♥️♥️
ربنا يوفقك يا بشمهندس من نجاح إلي نجاح اكبر إن شاء الله
برافو يا هندسه❤
بس المفروض يا هندسه كان يبقي في فيديو لطريقه الاجابات علشان الناس اللي ناويه تقدم ربنا يكرمها
Continue🔥🔥
الله ينور يا بشمهندس ما شاء الله مجهود مميز جدا انا راجعن معاك الجزء الاول كامل تاني عملت ريفريش للمعلومات والل كان ناقص فعلا الشرح مميز علشان طالع بطريقه واحد بيذاكر مش بيشرح كمان انت حالل اهم جزء انك انت شارح ال doucment نفسها اللي تعتبر الجزء الاصعب علشان كدا بالله عليك الجزء التاني ينزل حلقاته علي طول علشان نكمل الكورس كله معاك انا هخلص جزء الجافا سكريبت اللي في القناه لحد ما تنزل فيديوهات الجزء التاني مره كمان مجهود مشكور وربنا يجعله صدقه جاريه ليك
@@mohamedramadan6197 والله انا لو في أيدي اي لاخلصه واسجل عشانك انت حاضر ربنا يوفقك
@arabDevelopers312 تسلم يا بشمهندس حبيبي وبأمر الله هيبقي في تعاون ما بينا أن شاء الله
@@mohamedramadan6197 ده شرف لي
الله ينور يا هندسه شرح مميز
Thanks
جميل ي هندسه استمر ❤❤
Keep going🔥🔥
how to make eslint auto fix error on save in react project??
Using the Command Line Open your terminal in the root directory of your project. Run the following command: bash نسخ الكود npx eslint . --fix .: Tells ESLint to lint all files in the current directory and its subdirectories. --fix: Applies auto-fixable changes You can search or more info
بارك الله فيك شرحك جميل جدا
مجهود ممتاز يا هندسه
ما شاء اله يا هندسه
الله ينور يا هندسه
ممتاز جداً جداً، جزاك الله خيراً. جوعتنا بمثالك يا أخي 😅.
@@Naseem_Alsabah كنت بشرح وانا جعان😂
المستوي التاني بسرعه بقي مش عايزين نتأخر 😂😂
حاضر😂
محتاجين فيديوهات اكتر علشان بصراحه انا قريت اخلص الفيديوهات كلها ومش عايزين نكسل 😂
شكرا جدا ليك بجد ♥️
@@DeepDive312 ده اقل من حقك يا بشمهندس بس اتمني نكمل الرياكت بالاستمرار به دي علشان المعلومات فعلا مترجعش تتشتت تاني
لا مفيش كسل بإذن الله حاضر بحضر بس كده لكام حاجه محترمة بإذن الله نستفاد منها
دي حقيقه فعلا وان شاء الله هتبقي كدا وهتلقي مرجع بيسط ومرتب لاي حد ليحاول يتعلم الويب كله
الله ينور يا هندسه بجد شرح ال state جميل جدا
ربنا يحفظك❤️
والله ما عايز اقولك ان في حاجات كانت واقعه مني وما شاء الله بسترجعها وبتثبت اكتر وانا براجع معاك الفيديوهات
ما شااء الله اول حد يتطرق للموضوع ده وبتفتح مدارك اللي عايز يفهم كل حاجه ببساطه
الله ينور
شرح موفق وبسيط
الله ينور يا هندسه