React Tips and Tricks that Will Make You A Better React Developer

In this video I will go over 3 tips and tricks that will improve your react skills by a lot. At the end I also go on a tangent about whether you should use the context api or not.
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Business Email: [e-mail]
Timestamps
00:00 | Intro
00:39 | Optional Chaining
10:18 | Composition
16:45 | Context API vs Prop Drilling
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#reactjs #tips

[@Ayomikun]

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.

[@dearesthui]

You could also use React useMemo hook to prevent re-rendering of unrelated states.

[@IncomingLegend]

but can you have multiple contexts wrapped around each other?

[@farhankadir196]

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!

[@Rajatkumar-iy4px]

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.

[@alpaca_growing_kit]

As always, solid React content. I keep learning whenever you throw out new videos so keep them coming.

[@jitx2797]

Pedro you are just awesome man. Followed your MySQL react tutorial and it was just awesome.

[@donmikkodanm.olmillo8154]

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!

[@milburngomes2406]

Really great video!! Very useful in practical situation. Well explained and to the point. Keep up the good work!!

[@KILLCHRISU]

incredible tips! gonna use these on my next project. subbed 👍

[@revasseurborn2000]

Subscribed right away! U r clear with what you to want deliver ..!

[@akselipalmer5729]

Thank you for the Video! Super helpful.

[@Marcus-09]

amazing video and high quality content, thansk Pedro. Cheers from Italy

[@rohanraisaxena1514]

Please make more examples...when to use context api and when to use prop drilling... Btw this video helps me alot..thanks for this🤗

[@ghostcatcher1279]

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.

[@varanasi47]

@@ghostcatcher1279 yep i think contextAPI is meant for small scale apps or features only , for something like amazon clone , always use something like redux

[@windowspowerpoint1825]

@@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.

[@danshilm]

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.

[@pranitmogal715]

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..

[@Pablo-gl5jz]

Absolutely outstanding. Thanks a lot Pedro.

[@alexcoroza4518]

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

[@ezequielvallejo9352]

Nice!! Loved the first 2.

[@JeanDidier]

TYVM for the 2nd tip with composition

[@marcuslorenzo9705]

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.

[@primozbabsek6744]

That is actually very useful. Can't believe I didn't use those so far...

[@NamNguyen-oz8uj]

Thank Pedro,look forward to your video about contextAPI, redux, redux tollkit

[@chikwandaacademy]

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.

[@PedroTechnologies]

Glad I could help!

[@thespikything]

Worth mentioning that you can you get around the unnecessary re-rendering (when using too 'large' a Context) by memo-izing components.

[@user-xh1ky3mf3y]

Absolutely outstanding !

[@Mimi-rv5rb]

Very useful, thanks Pedro

[@universecode1101]

Good job Pedro ✌🏻 useful tips

[@PedroTechnologies]

Thanks! 😃

[@sealuke2724]

Nice tutorial! Hope you will make useReducer, Jotai, react-query for state management like a pro!

[@korbinschulz2093]

Just finished my first decent react project and used if statements to conditionally render, wish i had learned about optional chaining sooner!

[@akhilkumarsingh5041]

Congrats for 70k+ subs i am following u since 8k subs.

[@PedroTechnologies]

Thank you so much 😀 Its been a long journey, good to know u were here from the beginning!

[@az1nn]

Very cool!! Nice tips for beginners

[@semx8372]

Soooo useful video!! Thx alot !

[@pavelisel4127]

Good Content Pedro. Keep it up 👍

[@Slimgoodie0216]

Great video!

[@inspirationalquotes5840]

Thank you Pedro

[@TheGluemess]

fantastic content, keep it up!

[@ScriptyVijay]

Subscribed 👍 well explained

[@iprogrammer_v3809]

Good one thanks 😇

[@roman_k89]

very cool - i didn`t know anything of that, thanks!

[@PedroTechnologies]

Glad to help!

[@psydook]

Very helpful, thanks

[@Tinwall72]

Hey Pedro thanks for the nice videos, i really love them.

[@PedroTechnologies]

Glad to hear that!

[@freemenclub]

Useful!

[@abdessamade6995]

great content♥

[@willyhorizont8672]

@ 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?

[@toastrecon]

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.

[@PedroTechnologies]

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 :)

[@SteveBoyer10]

Works the same as he shows in the video. Keep learning TS. It’s worth it!

[@charbouy]

Thank you bro, lets go for those 100k subscribers!

[@PedroTechnologies]

[@arturmavlidov247]

Thanks!!

[@ShubhamSingh-it4om]

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.

[@usmanmughal_mirza2094]

Wow .. Composition is awesome .. optional chaining i already know ..

[@shivanshpatel4072]

i like the composition part bro

[@harrisonekpobimi4764]

Nice stuff buddy,, with this issue with context, what would you suggest

[@w1ckh3ad84]

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.

[@mohamadbadrian9655]

very useful tnx

[@afickredox4121]

rare content , thanks bro

[@AM-nm6ts]

thanks!

[@mooder3247]

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

[@ethanj1533]

What’s SWR

[@user-wl2xp8yo6x]

Тоже хочу добавить: 1. Отделяйте бизнес логику приложения отдельно от реакта. 2. Используйте хуки типа react-query, swr и не использовать стейт менеджеры типа redux, effector (Только для глобальных данных)

[@diegounanue]

This is a pattern I’m looking forward of how to implement. Using a custom hook with react query for state management.

[@sonamohialdin3376]

So good tutorial

[@sonlethanh5653]

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

[@ponderatulify]

What if you use useCallback to memoize the setters passed down from the provider components.

[@Bertoos8]

This channel is like a 🚀

[@rogi9696]

Actually i'm using jotai and react query together and pretty much solves all of the problems and they are very intuitive too

[@nelsonmichael4519]

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.

[@rogi9696]

@@nelsonmichael4519 The react query itself returns a lot of useful information about the data, isLoading, isFetching and others useful resources when building an app

[@DuyTran-ss4lu]

awesome

[@nogombrate]

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

[@canto_bjj]

bom demais man

[@Holfter]

Não vi ainda mas ja sei que vai ser bom kkkkk

[@viniciusm.m.7822]

Parabéns pela contribuição brother! Eu por enquanto não posso, mas sei q isso incentiva bastante!

[@Holfter]

@@viniciusm.m.7822 Quando puder tenho certeza que você vai contribuir.

[@PedroTechnologies]

Muito obrigado mano! Agradeço pelo apoio :)

[@pavelisel4127]

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

[@mmareplays4610]

"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

[@PedroTechnologies]

❤️❤️❤️

[@lkkope]

man, this video would have saved me a lot of headache yesterday.

[@fandross_]

muito bom!

[@ogunmokunademola7292]

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

[@appuser]

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).

[@robertbontas3228]

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.

[@mav3ricktv]

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

[@JamesSmith-yj7wq]

Hey Pedro can you make some videos on Class Components with a dummy project..

[@einfacherkerl3279]

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.

[@learn029]

I can't able to install create react app with yarn which step of command i have to follow

[@MrPaulPhan]

To help reduce the re-renders, could we memo here?

[@richardwilliam7030]

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

[@hassamulhaq7762]

09:35 👍 Helpful tips.

[@JackHartwig]

Baller

[@yousafsabir7]

Isn't Redux good solution to both context & prop drilling?

[@chesterxp508]

GoodJob!

[@windowspowerpoint1825]

The whole []/null, like, just use something like trpc, graphql or react-query like, they all provide methods to handle error catching

[@filipevalentegomes2383]

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?

[@PedroTechnologies]

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 :)

[@filipevalentegomes2383]

@@PedroTechnologies awesome, thanks for the video and taking time to reply

[@igorigmatenko504]

What about AWS Amplify(alternative for Firebase)?

[@johnpaulpineda2476]

Finally

[@dotdot-zp5vx]

you talk like morty from rick and morty , love your playlists though ive been watching your videos for the last 4 months learning react

[@SporteeGamer]

Hello is it necessary to learn css for learning react

[@PedroTechnologies]

No! But at least understand the basics of css cause thats useful for everything (not only react)

[@yakob-g]

the react docs are nice tho

[@tonyto2009]

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

[@cryptodev2615]

Recoil is the best state manager imo It's so easy.

[@raushanraj_99]

♥️

[@user-og7de8ih4f]

Do anyone know intro music link ?

[@huzafaarshad973]

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

[@PedroTechnologies]

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

[@huzafaarshad973]

@@PedroTechnologies ahh 👍 thanks now it is clear ☺️

[@Leyksnal]

Please make a video on change stream

[@taulantisaku4688]

A 99 years old still drinking beer, savage!

[@Randomguy48279xyz]

👍

[@AM-nm6ts]

22.00 and if we use redux with context?

[@PedroTechnologies]

Both are good options, but with their own benefits and negatives. I will explain more on my context api vs prop drilling vid

[@AM-nm6ts]

@@PedroTechnologies thanks a lot ,

[@husseinelkhatib754]

@@PedroTechnologies Waiting u. Thanks a lot.

[@windowspowerpoint1825]

why

[@dailymeow3283]

The correct title should be "Become a Bro in React"

[@Spytie1]

what about creating a context for each of the frequently changing states ? so it only rerenders components that use the state

[@c3ltic1]

But you can have as many context apis separate as you want no?

[@htmoh8115]

I was following a tutorial. At the react page I got stuck.