Тёмный

This React Trick Will Blow Your Mind 🤯 

Piyush Garg
Подписаться 173 тыс.
Просмотров 12 тыс.
50% 1

In this video, we are going to see the concept of Virtual DOM in React and one trick that can save you hours of debugging. We are going to understand this using practical examples of how React updates the state and travels virtual DOM.
Course Links
Full Stack Twitter Clone: learn.piyushga...
Docker Master Course: learn.piyushga...
Video Tags
#reactjs #javascript #nodejs #nextjs #webdevelopment

Опубликовано:

 

30 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 93   
@abdussamad0347
@abdussamad0347 Год назад
Finally the key makes sense to me
@prasadsawant7
@prasadsawant7 Год назад
True 😂
@semicolon6499
@semicolon6499 Год назад
😂😂😂
@kumaramit04-q6c
@kumaramit04-q6c Год назад
There are lot of exmaples including this is in the react docs. So, people should complete them first before jumping into react fancy clone projects😂.
@muhammadsufyan2693
@muhammadsufyan2693 Год назад
Hi, according to my knowledge every componant by default has key that is given by react but some times this key will not applied so that issue occurs then manually have to pass key Is
@TechnicalYarana
@TechnicalYarana Год назад
brother aapki video ka thumbnail kon banata hai i need to contact them please
@codetechygoon
@codetechygoon Год назад
This video was there bro already on web dev simplified few years back. Still no problem you can still go for this type of videos too, bcoz not everyone will be aware of it. Also I liked the second example.
@priyanshsharma8411
@priyanshsharma8411 9 месяцев назад
I did not know this use case for the key prop. I though it would only be useful for a list or array of components and to differentiate between their state. Thanks for the amazing and concise explanation.
@adnanahad
@adnanahad Месяц назад
I am subscribing for this…👍🏻
@alaluddin9005
@alaluddin9005 Год назад
Awesome 👍👍👍
@shubhamdas6519
@shubhamdas6519 Год назад
thanks sir
@itsworldtours
@itsworldtours Год назад
I think you have to make a daily video on a issue or a component, Great ❤
@mohitmandal4356
@mohitmandal4356 Год назад
Thankfully we've subscribed to wds
@gurukarun5508
@gurukarun5508 3 месяца назад
i have a query, if each selected play value maintain state mode, when even selected event change, example if player virat have score 4, then change the player to rishabh now rishabh score 3, then back to virat, score should be 4 (maintain the state of that player score)
@TonyStark-gs1jc
@TonyStark-gs1jc Год назад
Wow just wow, I did't now this till now, this could have save my hours of debugging 😑😑
@wasimrafik3535
@wasimrafik3535 Год назад
subscribe after watching this video make more this kind of videos
@LAAM-un8eo
@LAAM-un8eo 4 месяца назад
Very Interesting. Thank You
@ingoleshubham
@ingoleshubham Год назад
actually I am aware of this things but can't get up with class components, even I haven't tried to code them yet 😅
@romanpoudel
@romanpoudel 5 месяцев назад
I was rewriting the code for 1 week due to this and now I know this my 1 week work seems waste with 1 key change in the component. Thank you so much
@User-px6gz
@User-px6gz Год назад
I always knew that whenever props changes the child component rerender. So why its not re rendering. Yeh dom tree ka concept kdr se agya. It should have re rendered 😑
@rajeshnayak9745
@rajeshnayak9745 Год назад
Hello sir, Sir I am loser, sir job se nikal diya performance poor he bolke, but mujhe Kam Jo dete the vo me karta tha , kabhi kabhi time to time mai nai hota tha. Lekin Kam jarur complete karta Tha me, bhale late me ho hota jarur tha Kam To sir nikal diya 😭😭, or Mera goal bhi tha kuch, ki salary ayega to ye karna he career me. Sab Pani me chala gaya sir. Sir bohat Sara baat karna he demotivate feel kar raha hu plzz sir ek baar baat karlo..
@Rehmaan.
@Rehmaan. Год назад
Which theme are you using in VS code..please tell me??
@Techi-TrailBlazer
@Techi-TrailBlazer 11 месяцев назад
Ok but how to store the local score value in memory so that it doesn't get refreshed to default every time the props change?
@eternal423
@eternal423 Месяц назад
Finally got to know the importance of key
@anikettripathi1160
@anikettripathi1160 7 месяцев назад
Very well explained! I got the key, finally! 😅
@gandavadirekha744
@gandavadirekha744 Год назад
Thanku sharing knowledge trick
@AkashKumarRam-w7k
@AkashKumarRam-w7k Год назад
Sir make a course on Microfrontend With React 🔥
@Dev-Phantom
@Dev-Phantom Год назад
very interesting, I am a React developer I never knew this.
@imPrathamDev
@imPrathamDev Год назад
I am at 3:07 and the problem is key you have to define key to your component
@ipreet6850
@ipreet6850 Год назад
very nice , we learned something from your bug
@mdrifat6941
@mdrifat6941 Год назад
bro you does lots of useless talk. kindly try to talk less and to the point and code much
@mrinalfouzdar334
@mrinalfouzdar334 Год назад
Please make a video on debugging large code based on browser
@umangdubey6200
@umangdubey6200 Год назад
For this case we can also set default value to state on umounting of component in the return of useEffect
@fayyazali7246
@fayyazali7246 3 месяца назад
but i think key is better solution
@santokhan_
@santokhan_ 9 месяцев назад
Vai. Your explanation is really awesome.
@jhs003
@jhs003 Год назад
Ye key to bohot important nikli ❤
@gauravsinghjethuri5405
@gauravsinghjethuri5405 Год назад
nice video. bring more video like this.
@fearlesstaurus1585
@fearlesstaurus1585 Год назад
My guess for the challenge was correct
@adil.mallick
@adil.mallick 5 месяцев назад
Why you didn't use effect?
@vijaykoladara8302
@vijaykoladara8302 Год назад
Please make full mern stack course
@zafariqbal92
@zafariqbal92 Год назад
tabhi react hr bari loop ke andar key leta hai
@lovishduggal9064
@lovishduggal9064 Год назад
next video kab ayege!!
@robotbot6699
@robotbot6699 Год назад
Now i like the #key thanks bro
@arnabdey1332
@arnabdey1332 Год назад
I knew that brother!! That's why learning key is very important...
@navratanyadav5378
@navratanyadav5378 7 месяцев назад
10:30 🌟🌟
@ankit1153
@ankit1153 Год назад
Please continue your AWS 🙏😭 series it is really helpful.. please please i have watched AWS series video and i have learnt alot not just how to use but also about serverless, linux , ssh .. please continue it.
@aniketpatil7960
@aniketpatil7960 Месяц назад
Really help full ❤
@pradeeppop8201
@pradeeppop8201 Год назад
much interesting
@surajbera865
@surajbera865 Год назад
💯/ 💯
@sayeed__ajmal
@sayeed__ajmal 5 месяцев назад
Are bhai 😅😅.. I am beginner but mujhe laga kuch aur khas baat hogi. Ye to pehle se hi bata tha.. Aur agar koi backend se aaya hai frontend to usko pehle se hi bata lag jayega
@sayeed__ajmal
@sayeed__ajmal 5 месяцев назад
Aur agar console check kar lete to wahi bata deta ki bhai key daal element me 😅
@senior_software_engineer
@senior_software_engineer 9 месяцев назад
super excellent
@akshaythakur8376
@akshaythakur8376 5 месяцев назад
Ohh now I get it...
@kashmirtechtv2948
@kashmirtechtv2948 9 месяцев назад
Unique video
@mitrajanumishra8071
@mitrajanumishra8071 Год назад
Please Piyush complete the aws series with all the aws services from developer standpoint
@ramkumarchauhan3176
@ramkumarchauhan3176 Месяц назад
Nice
@aasifkhan1545
@aasifkhan1545 Год назад
Appreciating your approach to explaining the problem and its solution, Thank you for sharing this with us.
@chaitanya4600
@chaitanya4600 Год назад
Legend 💥🚀
@mukeshyadav-dw1oo
@mukeshyadav-dw1oo 6 месяцев назад
Nice
@ramprasadboddu2551
@ramprasadboddu2551 Год назад
Super😘
@nanipatelbandi
@nanipatelbandi Год назад
WOW!!!!
@ManojKumar-ud4ye
@ManojKumar-ud4ye 4 месяца назад
I have been working on React from the 3 years, but Today I got know this thing. This is something very different.
@TonyStark90743
@TonyStark90743 Год назад
Bhaiya please make Nodejs Backend Project in Microservice Architecture as there are no good resources for that especially updated for 2023🙏
@avi_5827
@avi_5827 Год назад
Thanks you Piyush bhaiya for sharing ❤
@aakashjadhav327
@aakashjadhav327 9 месяцев назад
Literally mind blown, so cool to know this, it's definitely a tricky bug to slove. Thankyou for this🎉.
@paulaneesh7
@paulaneesh7 Год назад
Sir, I want to ask you one thing Is your NodeJS playlist complete? like I want to learn Node and express so I'm thinking of following that playlist
@vikaskumar7019
@vikaskumar7019 8 месяцев назад
I was using key prop for a while but don't know exact use of it. Thanks for sharing the information. 👍
@developerprofile6565
@developerprofile6565 Год назад
loving your work
@rashidsiddiqui4502
@rashidsiddiqui4502 11 месяцев назад
I was really fascinated by the u handled the problem. I was trying to solve it keeping the score state in the parent component and setting it to 0 on button click. So, whenever there is a click event on the button, the score will automatically be set to 0. Really helpful video sir...
@sulaimanshabbir
@sulaimanshabbir Год назад
and all of this because of diffing.... 2:48 like dekhein jb reconciliation ho ri hogi jis ki output mein fiber tree bny ga to sth he diffing b ho ri hogi jis ka simple concept hai k ya elements ko track krta hai by their position or agar ek element div hai to bd mein b wo div hai span nahi to wo re-render ni kry ga
@AK-ln2ko
@AK-ln2ko Год назад
Useful video ❤. Thanks for uploading...
@zafariqbal92
@zafariqbal92 Год назад
Please continue your AWS 🙏😭 series it is really helpful.. please please
@mma-dost
@mma-dost Год назад
Knew about this like I guessed the answer btw thanks for the video bhaiya. Keep uploading more good projects.
@Shyam_Mahanta
@Shyam_Mahanta Год назад
Already know this trick. Thats y we use key while doing map.
@1NevilMistry
@1NevilMistry Год назад
Nice share can you give me the name of the vs code theme name it's looks amazing
@mdkawsarislamyeasin4040
@mdkawsarislamyeasin4040 11 месяцев назад
You are an ideal teacher sir 💓 Take love from Bangladesh .
@lalitkishork73
@lalitkishork73 Год назад
please make a video on frontend pack and backend pack who contains all tools and packeges details that requires for every fresher as well as wants to be like senior developer.
@pankajsingh7223
@pankajsingh7223 Год назад
react k official doc mai esa ek example hai sayad se thank you for more clearification ❤
@oppaedits9819
@oppaedits9819 Год назад
Awesomeeeee piyush..This is how i want to learn..make more this type of videos
@sahilaghara
@sahilaghara Год назад
Theme konsi hai??
@adityak5193
@adityak5193 Год назад
I think it's jellyfish or nightowls.
@umargulzar2982
@umargulzar2982 Год назад
I know this trick baby ❤❤❤😂😂
@sidtech10
@sidtech10 Год назад
Now I know why key is important🙂
@sayantanichatterjee2445
@sayantanichatterjee2445 7 месяцев назад
Sir aap bohot achhe se concept clear kar dete ho 👌👌
@BTCSEAKKAMGARIVENU
@BTCSEAKKAMGARIVENU Год назад
U r good to share your experience👍👍
@KaustavOP
@KaustavOP Год назад
Thanks for sharing this Piyush
@AsharMallick750
@AsharMallick750 Год назад
Most underrated youtuber
@parassharma7041
@parassharma7041 Год назад
Great video wasn't aware of it
@messi_codes
@messi_codes Год назад
what an explanation
@nishantsingh1425
@nishantsingh1425 Год назад
This was awesome! 🔥🔥
@bijaypoudel4244
@bijaypoudel4244 Год назад
Great content
@mandorakannu
@mandorakannu Год назад
❤❤❤❤❤❤
Далее
3 Ways to Make React App FASTER
14:43
Просмотров 41 тыс.
How to Earn with Open Source Contributions
24:03
Просмотров 184 тыс.
Вопрос Ребром - Серго
43:16
Просмотров 738 тыс.
You might not need useEffect() ...
21:45
Просмотров 162 тыс.
The Best React Code I Wrote (Code Review)
24:50
Просмотров 24 тыс.
Kubernetes 101 workshop - complete hands-on
3:56:03
Просмотров 1,6 млн
CSS Tips And Tricks I Wish I Knew Before
12:12
Просмотров 481 тыс.
useRef hook in reactjs | Easiest way
19:44
Просмотров 79 тыс.