For me I like to avoid prop drilling as much as possible as for me it's harder to debug and I often forget what props go where. For smaller applications I prefer contextAPI because it's fast to code out and easy to use. For larger applications I prefer to use Redux for state management on an app such as an Airbnb clone or maybe an Amazon clone.
@@ghostcatcher1279 yep i think contextAPI is meant for small scale apps or features only , for something like amazon clone , always use something like redux
I'd personally only use prop drilling for 2 (very rarely 3) layers of components, and that too only for those that make naturally make sense. If you find yourself having to prop drill through more than 3 layers, consider taking a step back and thinking about the architecture of your app. There might be simpler/more intuitive ways to achieve the same thing.
There is no proper guide on whether you should go with prop drilling or context API, Just validate your code in terms of necessity, whether it is required to do or not and then proceed, Context API is always a good choice when the data is stored does not have frequent updates..
Hey Pedro, Thanks for your awesome videos. Will you please make a tutorial on creating multi-vendor marketplace using Next Js + Mongodb or by MERN stack. It will an awesome learning.
Optional chaining is not the solution for working with data. The problem is it hides the issue of missing properties and in some cases it might force the app to execute a wrong condition that should have triggered an error if `?` was omitted
With recoil, zustang, redux with redux toolkit and so many others, isn't it just better to use one of these and get good at it, instead of using the context api?
Thing is, a great library is not just made out of how performant it is, we should also account for dev experience. Context api is amazing in the sense that it is simple and easy to use. I will make a more in depth vid on this :)
Just a small note for that last tip. You can have multiple contexts and providers in your app, so an alternative solution could be to just add an additional context. In your example, maybe 1 for the word and word setter, and another for the count and count setter. You could even go further and have 4 contexts: 1 for each value and value setter. Then you could call useContext for only the context values needed for each component.
Great content. I learned about use cases for Optional chaining and how you showed use cases for Context API vs Prop Drilling. I would definitely love some advanced react patterns which can be helpful in large scale applications.
Amazing! Thanks for the video, Pedro! I literally used optional chaining yesterday and was the same scenario of a useEffect() but fetching data from the db! It worked like a charm!
Yes!! I mean, a lot of devs have been coding in react for a while and don’t know some of these stuff. Most companies don’t encourage good code standards.
Simple solution is to have smaller context that only contain specific data. For instance auth context should only have auth data and nothing else. In that way you can avoid this problem. Also those who are suggesting to React.memo(), it wont work because it only operates on props not internal states of the component.
Hello i have 2 react questins that i whoud like to ask 1. If we use 2 or 3 different Context for diffrent part of app but we warp all providers on index.js will they reneder all components that use different part of state from each context (example state change in context 1 will that rerender components that use state from context 2 since they have same entry point or we need to wrap only components that need state in provider) 2. I was told that using React.memo() in component and useMemo() to wrap reference value props coming in that components is somehow bad and i whoud like to now if that is true
but also when parents props changes all its child render again so situation is still same tree render again what makes difference ?can anyone explain or correct me if I am wrong
The thing is, it will only re-render if the state passed through the props changes. If u are using the context api and any of the states inside the context change the value, all the components grabing anything from the context will re-render
I might be wrong, but don't you still need to check if the data is actually available even if you're using something like react query? I understand we would no longer need useEffect() when we're using those libraries.
@@nelsonmichael4519 The react query itself returns a lot of useful information about the data, isLoading, isFetching and others useful resources when building an app
I'm still new to TypeScript, but I wonder how optional chaining works with TS or if TS kind of makes some of that unnecessary? I mean, you'd have to define all of that beforehand or you'd get compile errors? Thanks, Pedro! These videos are amazing.
It works perfectly with TS since it won't allow you to access optional keys in objects unless you put the question mark. So in both you have to use optional chaining, but in TS it will give you an error message if you don't :)
UA-cam gives ads to people differently. Someone can get 10 ads, while another person can get 0. I don't chose how many ads are seen by each person, I do chose how many ads are possible. I apologize if it was too many in ur case
@@PedroTechnologies I appreaciate the honest answer, I was getting like an ad every 20s or less! Have to say it was in private tab, not sure if that matters. Anyways I should also say you have great content! Can't only say the negative :) keep up the good work
Тоже хочу добавить: 1. Отделяйте бизнес логику приложения отдельно от реакта. 2. Используйте хуки типа react-query, swr и не использовать стейт менеджеры типа redux, effector (Только для глобальных данных)
Thank you so much Pedro. Your react full stack web development course help me big time when I just started my software development career. Am so blessed by your content. Thank you.
I remember working with a lot of coffeescript which, although old, uses optional chaining. I kept asking myself why doesn't typescript implement such a feature and boom.. one day colleague introduced it to us and yeah, I don't think there has been a day I haven't used it
Brother your explanation of Composition helped me understand props. It clicks now...I get it. Muito obrigado irmao (assuming you speak Portuguese 😂). You're awesome.
Your composition over inheritance example was great and really got me thinking. However, forcing all components to look for the props.children property you break YAGNI/ISP (forcing all cards to implement {props.children), and are in-fact relying on a form of inheritance (inheriting the check for props.children). A more compositional alternative would be to have a component that is composed from a and element, perhaps called or something... So you don't have to repeat yourself (DRY), but you also don't have to implement features that aren't going to be used. In saying all that, your example is still somewhat compositional, and probably simpler as you require less actual components to implement it, and simpler always wins (KISS).
Hello pedro, i found you when you made the livestream of 4 hours making the Social Media application. I wanna thank you for everything. I would really appreciate if u can make something like a user profile that stocks the profile picture as a url of firebase reference, in a mysql column. I need that because i wanna make an app that work on my-sql but i wanna store images on firebase. That would be awesome, thanks brother.
I watched your react course/playlist and now i am trying to copy the spotify app with react. I remember you said and recommend to use context api. Me as a react beginner, i put my states in a GlobalContext. Now i changed the volume level via a slider and my spotify app goes like crazy, it was rerendering the whole app on every volume level change lol. Since then i started to learn more about this context api and states then found this video discussing the cons of context api
I liked the video but I do not agree with the argument that the state should be initialized in null. Could you point me to an article describing why is a better practice to start with null than with an empty array. Thanks
Great Pedro I need help I want to build an app with multiple layout Login can have different layouts and dashboard can have different layouts And also I need help in securing a react app
@ 13:25 yo pedro what's your best way create card component but one has ref on it ? do you create 2 similar component one without forwardRef and the other with forwardRef?
If I set my initial state to null, if the dB is empty it will definitely return an empty array. And an empty array is truthy, so how do we go about that
About the Context API. One way to prevent rerender is by using the children props for the child component in the AppContext Provider. The child component won't rerender if the state of context doesn't change
Thank you for the Video! Super helpful.
As always, solid React content. I keep learning whenever you throw out new videos so keep them coming.
Please make more examples...when to use context api and when to use prop drilling... Btw this video helps me alot..thanks for this🤗
For me I like to avoid prop drilling as much as possible as for me it's harder to debug and I often forget what props go where. For smaller applications I prefer contextAPI because it's fast to code out and easy to use. For larger applications I prefer to use Redux for state management on an app such as an Airbnb clone or maybe an Amazon clone.
@@ghostcatcher1279 yep i think contextAPI is meant for small scale apps or features only , for something like amazon clone , always use something like redux
@@varanasi47 There's a lot of options, Zustand is great, so is Redux toolkit, there is no one to rule them all. They all have pros and cons.
I'd personally only use prop drilling for 2 (very rarely 3) layers of components, and that too only for those that make naturally make sense.
If you find yourself having to prop drill through more than 3 layers, consider taking a step back and thinking about the architecture of your app. There might be simpler/more intuitive ways to achieve the same thing.
There is no proper guide on whether you should go with prop drilling or context API, Just validate your code in terms of necessity, whether it is required to do or not and then proceed, Context API is always a good choice when the data is stored does not have frequent updates..
Thank you bro, lets go for those 100k subscribers!
Thank Pedro,look forward to your video about contextAPI, redux, redux tollkit
Wow .. Composition is awesome .. optional chaining i already know ..
Soooo useful video!! Thx alot !
Hey Pedro,
Thanks for your awesome videos.
Will you please make a tutorial on creating multi-vendor marketplace using Next Js + Mongodb or by MERN stack.
It will an awesome learning.
Hey, nice Video, I have got a fix for the context rerender issue. You create two contexts, one for the value and one for the setter.
Thanks!!
Nice stuff buddy,, with this issue with context, what would you suggest
Very cool!! Nice tips for beginners
fantastic content, keep it up!
Optional chaining is not the solution for working with data. The problem is it hides the issue of missing properties and in some cases it might force the app to execute a wrong condition that should have triggered an error if `?` was omitted
With recoil, zustang, redux with redux toolkit and so many others, isn't it just better to use one of these and get good at it, instead of using the context api?
Thing is, a great library is not just made out of how performant it is, we should also account for dev experience. Context api is amazing in the sense that it is simple and easy to use. I will make a more in depth vid on this :)
@@PedroTechnologies awesome, thanks for the video and taking time to reply
Finally
A 99 years old still drinking beer, savage!
GoodJob!
22.00 and if we use redux with context?
Both are good options, but with their own benefits and negatives. I will explain more on my context api vs prop drilling vid
@@PedroTechnologies thanks a lot ,
@@PedroTechnologies Waiting u. Thanks a lot.
why
You forgot to use Typescript---
is this really ADVANCED? I thought everyone was already using these.
How to become a better react developer: switch to sveltekit and quit this gargabe once and for all
Just a small note for that last tip. You can have multiple contexts and providers in your app, so an alternative solution could be to just add an additional context. In your example, maybe 1 for the word and word setter, and another for the count and count setter. You could even go further and have 4 contexts: 1 for each value and value setter. Then you could call useContext for only the context values needed for each component.
You could also use React useMemo hook to prevent re-rendering of unrelated states.
but can you have multiple contexts wrapped around each other?
Great content. I learned about use cases for Optional chaining and how you showed use cases for Context API vs Prop Drilling. I would definitely love some advanced react patterns which can be helpful in large scale applications.
Congrats for 70k+ subs i am following u since 8k subs.
Thank you so much 😀 Its been a long journey, good to know u were here from the beginning!
Good job Pedro ✌🏻 useful tips
Thanks! 😃
Nice tutorial! Hope you will make useReducer, Jotai, react-query for state management like a pro!
Amazing! Thanks for the video, Pedro! I literally used optional chaining yesterday and was the same scenario of a useEffect() but fetching data from the db! It worked like a charm!
"I don't know what I did to deserve 70k subs, but we're aiming for 100k by the end of the year haha" gatto love this guy hahaha
❤️❤️❤️
this is more lile "React tips that will make you know React ", and not be a "Hello World" React developer
Yes!! I mean, a lot of devs have been coding in react for a while and don’t know some of these stuff. Most companies don’t encourage good code standards.
Não vi ainda mas ja sei que vai ser bom kkkkk
Parabéns pela contribuição brother! Eu por enquanto não posso, mas sei q isso incentiva bastante!
@@viniciusm.m.7822 Quando puder tenho certeza que você vai contribuir.
Muito obrigado mano! Agradeço pelo apoio :)
amazing video and high quality content, thansk Pedro. Cheers from Italy
Simple solution is to have smaller context that only contain specific data. For instance auth context should only have auth data and nothing else. In that way you can avoid this problem. Also those who are suggesting to React.memo(), it wont work because it only operates on props not internal states of the component.
Hello i have 2 react questins that i whoud like to ask
1. If we use 2 or 3 different Context for diffrent part of app but we warp all providers on index.js will they reneder all components that use different part of state from each context (example state change in context 1 will that rerender components that use state from context 2 since they have same entry point or we need to wrap only components that need state in provider)
2. I was told that using React.memo() in component and useMemo() to wrap reference value props coming in that components is somehow bad and i whoud like to now if that is true
but also when parents props changes all its child render again so situation is still same tree render again what makes difference ?can anyone explain or correct me if I am wrong
The thing is, it will only re-render if the state passed through the props changes. If u are using the context api and any of the states inside the context change the value, all the components grabing anything from the context will re-render
@@PedroTechnologies ahh 👍 thanks now it is clear ☺️
Do anyone know intro music link ?
you talk like morty from rick and morty , love your playlists though ive been watching your videos for the last 4 months learning react
Pedro you are just awesome man. Followed your MySQL react tutorial and it was just awesome.
Actually i'm using jotai and react query together and pretty much solves all of the problems and they are very intuitive too
I might be wrong, but don't you still need to check if the data is actually available even if you're using something like react query? I understand we would no longer need useEffect() when we're using those libraries.
@@nelsonmichael4519 The react query itself returns a lot of useful information about the data, isLoading, isFetching and others useful resources when building an app
I'm still new to TypeScript, but I wonder how optional chaining works with TS or if TS kind of makes some of that unnecessary? I mean, you'd have to define all of that beforehand or you'd get compile errors? Thanks, Pedro! These videos are amazing.
It works perfectly with TS since it won't allow you to access optional keys in objects unless you put the question mark. So in both you have to use optional chaining, but in TS it will give you an error message if you don't :)
Works the same as he shows in the video. Keep learning TS. It’s worth it!
This channel is like a 🚀
Subscribed 👍 well explained
too many ads man, like 10 per video? problematic.
UA-cam gives ads to people differently. Someone can get 10 ads, while another person can get 0. I don't chose how many ads are seen by each person, I do chose how many ads are possible. I apologize if it was too many in ur case
@@PedroTechnologies I appreaciate the honest answer, I was getting like an ad every 20s or less! Have to say it was in private tab, not sure if that matters. Anyways I should also say you have great content! Can't only say the negative :) keep up the good work
What about AWS Amplify(alternative for Firebase)?
Subscribed right away! U r clear with what you to want deliver ..!
I can't able to install create react app with yarn which step of command i have to follow
Baller
Тоже хочу добавить:
1. Отделяйте бизнес логику приложения отдельно от реакта.
2. Используйте хуки типа react-query, swr и не использовать стейт менеджеры типа redux, effector (Только для глобальных данных)
This is a pattern I’m looking forward of how to implement. Using a custom hook with react query for state management.
Isn't Redux good solution to both context & prop drilling?
I was following a tutorial. At the react page I got stuck.
This removed over 200 if statements from my code 😅
But you can have as many context apis separate as you want no?
The correct title should be "Become a Bro in React"
Thank you so much Pedro. Your react full stack web development course help me big time when I just started my software development career. Am so blessed by your content. Thank you.
Glad I could help!
TYVM for the 2nd tip with composition
I remember working with a lot of coffeescript which, although old, uses optional chaining. I kept asking myself why doesn't typescript implement such a feature and boom.. one day colleague introduced it to us and yeah, I don't think there has been a day I haven't used it
Brother your explanation of Composition helped me understand props. It clicks now...I get it. Muito obrigado irmao (assuming you speak Portuguese 😂). You're awesome.
Your composition over inheritance example was great and really got me thinking. However, forcing all components to look for the props.children property you break YAGNI/ISP (forcing all cards to implement {props.children), and are in-fact relying on a form of inheritance (inheriting the check for props.children). A more compositional alternative would be to have a component that is composed from a and element, perhaps called or something... So you don't have to repeat yourself (DRY), but you also don't have to implement features that aren't going to be used. In saying all that, your example is still somewhat compositional, and probably simpler as you require less actual components to implement it, and simpler always wins (KISS).
Absolutely outstanding. Thanks a lot Pedro.
Hello pedro, i found you when you made the livestream of 4 hours making the Social Media application. I wanna thank you for everything. I would really appreciate if u can make something like a user profile that stocks the profile picture as a url of firebase reference, in a mysql column. I need that because i wanna make an app that work on my-sql but i wanna store images on firebase. That would be awesome, thanks brother.
Very useful, thanks Pedro
Absolutely outstanding !
I watched your react course/playlist and now i am trying to copy the spotify app with react. I remember you said and recommend to use context api. Me as a react beginner, i put my states in a GlobalContext. Now i changed the volume level via a slider and my spotify app goes like crazy, it was rerendering the whole app on every volume level change lol. Since then i started to learn more about this context api and states then found this video discussing the cons of context api
Please make a video on change stream
The whole []/null, like, just use something like trpc, graphql or react-query like, they all provide methods to handle error catching
Nice!! Loved the first 2.
i like the composition part bro
♥️
very cool - i didn`t know anything of that, thanks!
Glad to help!
What if you use useCallback to memoize the setters passed down from the provider components.
I liked the video but I do not agree with the argument that the state should be initialized in null. Could you point me to an article describing why is a better practice to start with null than with an empty array. Thanks
Great
Pedro I need help
I want to build an app with multiple layout
Login can have different layouts and dashboard can have different layouts
And also I need help in securing a react app
@ 13:25 yo pedro what's your best way create card component but one has ref on it ? do you create 2 similar component one without forwardRef and the other with forwardRef?
If I set my initial state to null, if the dB is empty it will definitely return an empty array. And an empty array is truthy, so how do we go about that
man, this video would have saved me a lot of headache yesterday.
very useful tnx
Hey Pedro
thanks for the nice videos, i really love them.
Glad to hear that!
rare content , thanks bro
Hey Pedro can you make some videos on Class Components with a dummy project..
the react docs are nice tho
09:35 👍
Helpful tips.
Just finished my first decent react project and used if statements to conditionally render, wish i had learned about optional chaining sooner!
Hello is it necessary to learn css for learning react
No! But at least understand the basics of css cause thats useful for everything (not only react)
07:48 how about this ?
const [myArray, setMyArray] = useState([])
....
return (
(Array.isArray(myArray) && myArray.length > 0) && myArray.map((item) => {item?.name})
)
Don't do this lmaooo
@@PedroTechnologies ok i will refactor my code later :D your way is better and much cleaner
Can i Ask u for help on a react game? U have discord so i Can explain the question detailed?
Good one thanks 😇
Can i Ask u for help on a react game? U have discord so i Can explain the question detailed?
About the Context API. One way to prevent rerender is by using the children props for the child component in the AppContext Provider. The child component won't rerender if the state of context doesn't change
Useful!
So good tutorial
Thank you Pedro
Great video!
That is actually very useful. Can't believe I didn't use those so far...
To help reduce the re-renders, could we memo here?
great content♥
thanks!
awesome
Really great video!! Very useful in practical situation. Well explained and to the point. Keep up the good work!!
👍
❤️
Please make tutorial for post views 👁️🤙🚀