Silly React Mistakes not to make (plus how to solve them)
HTML-код
- Опубликовано: 2 окт 2024
- Enroll to the Full Stack React Course 👇
developedbyed....
Ever wondered why your React components re-render more often than your wardrobe changes? 🤔 We've got you covered! We'll unravel the mystery of re-renders and reveal some hidden truths that'll keep your app running smoother than a buttered-up water slide.
Next, we'll tackle the do's and don'ts of state and useEffect like a pro, so you can avoid those pesky pitfalls that even the best of us have fallen into. You might call it a "state" of enlightenment! 🤯
So, grab your favorite snack, throw on your comfiest coding hoodie, and join us as we laugh our way through the most common React blunders and teach you how to fix them like a boss. And remember, sharing is caring - so don't forget to like, comment, and share this video with your fellow devs!
Let's get our React game on point! 🚀
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/dev...
#programming #react #webdevelopment
React is weird, hope this helped understand some of the render concepts in React and it's side effects. 🔥
0:15 Number 1, && Operator (empty array's length is 0, which is falsy value but not for JSX that sees it as valid value)
3:03 Number 2, React Re-renders (React component re-enders when its state changes, that means re-renders for its all child components and to prevent that use memo() function)
9:20 Number 3, Side Effects (run Side Effects only in useEffect Hook)
22:48 Number 4, Keys (when mapping over a list DO NOT use indexes as an id - they will change when new elements ared added to the array, NOR built into browsers APIs like crypto.randomUUID() - when page refreshes new ids are generated)
26:17 Number 5, Updating State (do not rely on current state value for calculating the next one, reach instead for callback function that state setters have and set the state based on the previous state)
Thanks Ed!
legend 👑
I'm little suprised that You didn't mentioned that but instead of logical rendering with '&&'(and operator) we can also use the optional chaining operator '?'. Like that: {tweets?.map(tweet) => (code here)}. It will check if tweets constant contain mapped data on right side if not it will just short circuit and return with 'undefined' without throwing error.
Edit: I have noticed now that His mic is floating, this is the magic of coding?(🤔)
I wasn't ready for ending
I think you meant tweets.length > 0 at 2:55.
That’s it! Hahaha
Lol I checked the comments just for this XD
Is tweets.length > 0 or !!tweets.length better
I feel like the second one is cleaner
@@ramyjaiemandroid according to me > will be better as it is more readable.
Yeah man. Even i was confused 😂
Nice video bro...btw would be able to make a full descriptive video of context Api with useReducer. Sometimes it gets pretty confusing. It would be a great help. Thanks bro, keep it up👍👍
Since the array length is 0, the Array.map will not map anything. In this case, we no need to do the array.length > 0 checking right? instead, we just need to check whether the array is null, undefined or something else
Thankyou so much. Learned many things. :)
how about !!tweets.length && ...
What does !! do? Single negation will negate the value but what does double negation do?
@@paradoxify_ !! (double bang operator) double negates it,
it first turns the 0 into a true, then it turns it back into false.
In very simple terms, it changes the 0 (or any positive / negative value for that matter) to its corresponding boolean.
@@ralkey Oh wow, didn't know it exists. Thanks for explaining.
Great content as always!
What was the extension called for auto completion of useState/arrow function?
can we use tweets?.map in the first issue?
Great, 28 mins just flew. I like how you jumped right into the topic
Thanks! 💯
!!tweets.length is also valid
@developedbyed what's the extension you use to auto complete the code??
Crypto.randomUUID is not that problem, if u create service mappers(because BE developers are too lazy, to send u proper structure all the time)
Also about 27:25, it's good to be mentioned that why React set count to 2, because it's batching all the setState/dispatch operations
I want dev course as now I can't afford ......anyone can help me
why not casting the items.length into boolean? !!items.length
Thank you sir for teaching us for free,
I want to learn and work with you.
i have make all project that u have made,,,and even more.,, I am student of 2nd year...and please tell how can i grab internship.
Would it not be good, to have the memo behaviour as default behaviour?
I m downloading this video locallyyyyyy..... ⬇
What is used to have those emoji window at 5:40?
What is the extension for emotes
Thanks @developedbyed for this info👍🏿👍🏿☺️
Is this all done in NEXT JS App directory?
What's the song in the background Ed? So relaxing and nice to study 😇
Waiting for the Fireship comment!
Thanks a lot for the video. It is very informative. On a different note, may I ask what theme and font you are using for your VS code?
Very informative, thanks for awesome video
What an absolute gem of a video! I'm a front end junior and I feel so called out by some of the things you showed haha. Thanks to you I know how to avoid making them!
This video was very much needed, thanks for putting up with this good work!🎉
Idk but everytime see ur video, it makes me wanna learn again
I believe your fix for tip #1 does not work. While using 'tweets.length < 0' works for the empty case, adding tweets back still won't render anything.
My solution to this is just to use 'tweets.length > 0 &&'
Great content Dev. I believe most devs have faced similar issues several times!
But...but... chatGPT told me to rerender at the root....
Thanks a lot for providing.
Awesome video - thank you ❤
Should I use memo() to wrap all my components then? In case they're children components of another component which will re-render very often?
And should I use useId() hook when there's no unique id in arrays?
I think you should Use memo only when necessary, don't make react do extra work checking the condition
Amazing❤
Thank you 😊
❤❤
How did you add fire emoji ?
"Win + . " ??
The silliest mistake of them all is using react
third comment here!!!
Should be tweets.length > 0
In my opinion, a better way to fix "tweets.length" being 0 is by using the double bang operator (!!),
by typing "!!tweets.length" you are converting the 0 to a false,
so there is no need to put a "