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

Подписаться 205 тыс.

Просмотров 87 тыс.

50% 1

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: pedro@pedrotech.co
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

Наука

Опубликовано:

30 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 153

@farhankadir196 2 года назад

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!

@Ayomikun 2 года назад

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?

@Rajatkumar-iy4px 2 года назад

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 2 года назад

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

@jitx2797 2 года назад

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

@donmikkodanm.olmillo8154 2 года назад

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 2 года назад

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

@revasseurborn2000 2 года назад

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

@Marcus-09 2 года назад

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

@akselipalmer5729 Год назад

Thank you for the Video! Super helpful.

@rohanraisaxena1514 2 года назад

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 2 года назад

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 2 года назад

@@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 2 года назад

@@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 2 года назад

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 2 года назад

Absolutely outstanding. Thanks a lot Pedro.

@KILLCHRISU Год назад

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

@chikwandaacademy 2 года назад

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 2 года назад

Glad I could help!

@sealuke2724 2 года назад

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

@Mimi-rv5rb 2 года назад

Very useful, thanks Pedro

@ezequielvallejo9352 2 года назад

Nice!! Loved the first 2.

@universecode1101 2 года назад

Good job Pedro ✌🏻 useful tips

@PedroTechnologies 2 года назад

Thanks! 😃

@marcuslorenzo9705 2 года назад

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.

@thespikything 2 года назад

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

@NamNguyen-oz8uj 2 года назад

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

@JeanDidier 2 года назад

TYVM for the 2nd tip with composition

@alexcoroza4518 10 месяцев назад

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

@ScriptyVijay 2 года назад

Subscribed 👍 well explained

@user-xh1ky3mf3y 6 месяцев назад

Absolutely outstanding !

@Slimgoodie0216 2 года назад

Great video!

@korbinschulz2093 Год назад

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

@primozbabsek6744 2 года назад

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

@freemenclub 2 года назад

Useful!

@semx8372 2 года назад

Soooo useful video!! Thx alot !

@inspirationalquotes5840 2 года назад

Thank you Pedro

@az1nn 2 года назад

Very cool!! Nice tips for beginners

@TheGluemess 2 года назад

fantastic content, keep it up!

@psydook 2 года назад

Very helpful, thanks

@Tinwall72 2 года назад

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

@PedroTechnologies 2 года назад

Glad to hear that!

@pavelisel4127 2 года назад

Good Content Pedro. Keep it up 👍

@ShubhamSingh-it4om 2 года назад

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.

@iprogrammer_v3809 2 года назад

Good one thanks 😇

@abdessamade6995 2 года назад

great content♥

@akhilkumarsingh5041 2 года назад

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

@PedroTechnologies 2 года назад

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

@arturmavlidov247 2 года назад

Thanks!!

@roman_k89 2 года назад

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

@PedroTechnologies 2 года назад

Glad to help!

@w1ckh3ad84 2 года назад

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 2 года назад

very useful tnx

@toastrecon 2 года назад

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 2 года назад

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 2 года назад

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

@harrisonekpobimi4764 2 года назад

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

@shivanshpatel4072 2 года назад

i like the composition part bro

@afickredox4121 2 года назад

rare content , thanks bro

@charbouy Год назад

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

@PedroTechnologies Год назад

@usmanmughal_mirza2094 2 года назад

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

@mooder3247 2 года назад

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 2 года назад

What’s SWR

@AM-nm6ts 2 года назад

thanks!

@sonlethanh5653 2 года назад

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

@fandross_ 2 года назад

muito bom!

@willyhorizont8672 2 года назад

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

@sonamohialdin3376 2 года назад

So good tutorial

@rogi9696 2 года назад

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

@nelsonmichael4519 2 года назад

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 2 года назад

@@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 2 года назад

awesome

@canto_bjj 2 года назад

bom demais man

@user-wl2xp8yo6x 2 года назад

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

@diegounanue 2 года назад

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

@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

@johnpaulpineda2476 2 года назад

Finally

@Bertoos8 2 года назад

This channel is like a 🚀

@chesterxp508 2 года назад

GoodJob!

@mmareplays4610 2 года назад

"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 2 года назад

❤️❤️❤️

@robertbontas3228 2 года назад

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.

@JamesSmith-yj7wq 2 года назад

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

@Holfter 2 года назад

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

@viniciusm.m.7822 2 года назад

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

@Holfter 2 года назад

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

@PedroTechnologies 2 года назад

Muito obrigado mano! Agradeço pelo apoio :)

@appuser 2 года назад

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

@ponderatulify 2 года назад

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

@windowspowerpoint1825 2 года назад

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

@ogunmokunademola7292 2 года назад

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

@pavelisel4127 2 года назад

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

@MrPaulPhan 2 года назад

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

@JackHartwig 2 года назад

Baller

@PAVANKUMAR-wx1eh 2 года назад

❤️

@tonyto2009 2 года назад

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

@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

@learn029 2 года назад

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

@richardwilliam7030 2 года назад

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

@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

@einfacherkerl3279 6 месяцев назад

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.

@filipevalentegomes2383 2 года назад

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 2 года назад

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 2 года назад

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

@Randomguy48279xyz 2 года назад

👍

@hassamulhaq7762 2 года назад

09:35 👍 Helpful tips.

@yakob-g 2 года назад

the react docs are nice tho

@Leyksnal 2 года назад

Please make a video on change stream

@yousafsabir7 2 года назад

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

@cryptodev2615 2 года назад

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

@SporteeGamer 2 года назад

Hello is it necessary to learn css for learning react

@PedroTechnologies 2 года назад

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

@user-og7de8ih4f 2 года назад

Do anyone know intro music link ?

@huzafaarshad973 2 года назад

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 2 года назад

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 2 года назад

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