Beginner React Mistakes You Should Avoid

preview_player
Показать описание
In this video I will be going over some beginner reactjs mistakes I believe you should avoid committing.

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

TimeStamps

00:00 | Intro
01:09 | Correctly mutating states
06:16 | Maximizing the potential of UseEffect
10:45 | Using Ternary Operators
11:31 | Multiple components in a file
12:16 | Prop Drilling

Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

#reactjs #tips
Рекомендации по теме
Комментарии
Автор

I think the first case with usestate is the major problem for many beginners like me. As I'm working on a large project, there's lot of state updating and this tip is quite usefull if you want to bind your state with other components in react router, as state doesn't get updated exactly to real value. Thanks for sharing it 😇😇

sumitmehra
Автор

I think that when you have prop drilling issues, before reaching for context or redux, it's usually best to consider if you are using the `children` prop effectively. A lot of the time if you aren't using the drilled prop in the intermediate components, they can render `{children}` and that prop can be passed directly from the origin parent to the component that needs it.

butterfly
Автор

I'm a backend developer and I'm learning a lot from these videos. Thank you !!

brucewayne
Автор

useState is async.. thats why you don't get the same result when console.logging or alerting the value of it.. you need useEffect with a counter as its dependency to 'sync'

fatesteyneit
Автор

Just started learning React recently, and I had been doing some prop drilling. The create context api seems like a very useful workaround. Thanks for the video.

TheLongAndNarrowPath
Автор

I'm extremely embarrassed. Nearly 3 years react of experienced, I understand the state doesn't update until the rerender, but I didn't know you could callback the useState hook like that.

KoyFoster
Автор

i love your videos, it is been 1 year that i started self learning react js and your videos are so useful. keep it up the good work

Kolpaja
Автор

Good video, however I would disagree with your point about ternary vs && operator, because there's a difference between them. For instance if you use && operator and the second value is falsy, it will evaluate to 0 instead off null. Then, when it's converted to string, it will be shown as "0" instead of empty string. So sometimes it's better to use ternary operator even if it's more characters to write and looks a bit worse.

Edit: Previously I assumed that empty array is falsy, but it isn't. So there is very few examples where it makes difference.

filipkrawczyk
Автор

Should be cautious about the 1st honorable mention. If you use the logical '&&' instead of ternary in React Native, it'll cause error.
So it's better to use the ternary as general practice

talhaibnemahmud
Автор

there is a thing to note while using useContext sir.. when the values passed in the contextProvider change, it typically re-renders the entire child components inside it even when only some childs or grand Childs actually do make use of it.. one should be aware of performance issue resulting in rendering heavy components that has nothing to do with updatable context values

vigneshwarrv
Автор

Tip #1 - brilliantly explained through example

sahej
Автор

Thanks for clarifying the useEffect as i am always confused about its use cases

yashwantg
Автор

i need this kind of a video so much sometimes as an affirmation, I knew how some of those functions works but what if i am wrong feeling is not fun

flowerofash
Автор

How much of javascript do you think you should know before jumping into react? i'm new into programming. Also, would love some tips for projects to add in my portfolio. Thanks!

paramirov
Автор

Good video for React newbies! About prop drilling problem I will just suggest to people "go for Redux" and understand it. At any point of your developer path you will face the state management as an issue. I personally never pass the props to a second nested component, never felt of need to do that. Inbuild React context management is easy at beginning, but scales pretty bad. Once again, good video!

FalioV
Автор

Started learning react few weeks ago. And experienced that setState moment where counter wont update.

going_dark
Автор

I thought the only way to have those props from app to grand child was with either drilling (I didn't even know that was what I was doing) or using something like redux to have more like global states, very usefull, thanks a lot !

santiagoaguirregalvez
Автор

Pedro, the first tip is great but you're not explaining the reason to resort to this accurately. The main reason is so the reference to the state is the most up-to-date and to avoid a closure (getting lexical environment's current state and the time the function was shipped to the call stack). Moreover, it's also useful to call the state setter passing a call when you're in a useEffect and accessing the "count" state would imply you need to declare it as dependency for the useEffect, that's another scenario where passing a callback and getting the prevValue would come in hand.

I would encourage you to really have a solid grasp of a concept because you have a lot of influence and it's good to have solid examples when delivering it to the other folks.

By the way I had to look up this cause I didn't remember it too well but I just knew that what you mentioned wasn't exactly the reason to resort to the callback with the state setter.

hectorserrano
Автор

I’ve seen and used that prev thing in the first case but never fully understood it, thank you for explaining in such a beginner friendly manner

Bayzon
Автор

thanks for video Pedro! Another tip for 11:15 would be that convert it to a boolean by doing ` !!showText ` so you will not have to worry about having an accidental zero show up in your app.

fabiandev