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.
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..
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.
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
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!
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.
@ 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?
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
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.
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 :)
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.
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
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
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'm using context api for a really big project what i came up with is sperating the contexts to small pieces that responsible for smal pieces of the UI and trying to avoid global states and use local states and most importantly use SWR for server states and so far everything is working good
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 :)
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
Тоже хочу добавить: 1. Отделяйте бизнес логику приложения отдельно от реакта. 2. Используйте хуки типа react-query, swr и не использовать стейт менеджеры типа redux, effector (Только для глобальных данных)
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
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
I love your guides. thank you so much! will surely love to suggest to make this one a playlist on your channel so that it will be easily navigate. and also a series of tips and tricks good for any level especially beginners not just react but also JS. thank you!
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).
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
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.
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
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.
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?
Thank you for the Video! Super helpful.
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..
Good job Pedro ✌🏻 useful tips
Thanks! 😃
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.
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 :)
Pedro you are just awesome man. Followed your MySQL react tutorial and it was just awesome.
amazing video and high quality content, thansk Pedro. Cheers from Italy
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
As always, solid React content. I keep learning whenever you throw out new videos so keep them coming.
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!
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!
TYVM for the 2nd tip with composition
Nice!! Loved the first 2.
Subscribed right away! U r clear with what you to want deliver ..!
That is actually very useful. Can't believe I didn't use those so far...
Absolutely outstanding !
Subscribed 👍 well explained
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!
Absolutely outstanding. Thanks a lot Pedro.
Wow .. Composition is awesome .. optional chaining i already know ..
Good Content Pedro. Keep it up 👍
Thank you bro, lets go for those 100k subscribers!
Thank Pedro,look forward to your video about contextAPI, redux, redux tollkit
man, this video would have saved me a lot of headache yesterday.
fantastic content, keep it up!
Very useful, thanks Pedro
Nice tutorial! Hope you will make useReducer, Jotai, react-query for state management like a pro!
@ 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?
Just finished my first decent react project and used if statements to conditionally render, wish i had learned about optional chaining sooner!
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
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.
very cool - i didn`t know anything of that, thanks!
Glad to help!
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!
Thank you Pedro
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.
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
Great video!
What if you use useCallback to memoize the setters passed down from the provider components.
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 can't able to install create react app with yarn which step of command i have to follow
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 ☺️
Soooo useful video!! Thx alot !
I'm using context api for a really big project what i came up with is sperating the contexts to small pieces that responsible for smal pieces of the UI and trying to avoid global states and use local states and most importantly use SWR for server states and so far everything is working good
What’s SWR
This channel is like a 🚀
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
Hey Pedro
thanks for the nice videos, i really love them.
Glad to hear that!
great content♥
To help reduce the re-renders, could we memo here?
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
Very cool!! Nice tips for beginners
the best recommendation would be using typescript 😅. but i understand for explaining the principles its eqsier
rare content , thanks bro
Тоже хочу добавить:
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.
i like the composition part bro
Good one thanks 😇
Nice stuff buddy,, with this issue with context, what would you suggest
Really great video!! Very useful in practical situation. Well explained and to the point. Keep up the good work!!
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
Isn't Redux good solution to both context & prop drilling?
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
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
I love your guides. thank you so much! will surely love to suggest to make this one a playlist on your channel so that it will be easily navigate. and also a series of tips and tricks good for any level especially beginners not just react but also JS. thank you!
Very helpful, thanks
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.
"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
❤️❤️❤️
Useful!
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)
Do anyone know intro music link ?
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).
What about AWS Amplify(alternative for Firebase)?
The whole []/null, like, just use something like trpc, graphql or react-query like, they all provide methods to handle error catching
Thanks!!
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
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 Pedro can you make some videos on Class Components with a dummy project..
thanks!
So good tutorial
Recoil is the best state manager imo It's so easy.
09:35 👍
Helpful tips.
very useful tnx
But you can have as many context apis separate as you want no?
I was following a tutorial. At the react page I got stuck.
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
what about creating a context for each of the frequently changing states ? so it only rerenders components that use the state
you talk like morty from rick and morty , love your playlists though ive been watching your videos for the last 4 months learning react
A 99 years old still drinking beer, savage!
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.
The correct title should be "Become a Bro in React"
Please make a video on change stream
the react docs are nice tho
Baller
awesome
muito bom!
Finally
bom demais man
GoodJob!
Please make tutorial for post views 👁️🤙🚀
♥️
You forgot to use Typescript---