5 Pro-Level React Do's & Don'ts

In this video, Jack will talk about some do's and don'ts when it comes to writing code with the React JavaScript framework.
📽️ Jack's KZbin Channel:
/ jackherrington
👇 Follow Traversy Media On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy
Timestamps:
00:00 Introduction
00:30 Do use functional components
02:22 Don’t think of function components as templates
07:08 Do use TypeScript
12:02 Don’t worry about re-renders (too much)
14:35 Do learn to love dependency arrays
18:36 Don’t ignore useCallback or useMemo
22:25 Do learn to make custom hooks
23:23 Don’t use Redux just because you think you have to
26:00 Do use a query library
27:50 Don’t make your own UI library
29:29 Outroduction

[@TraversyMedia]

I want to thank Jack for letting me post this amazing in-depth video to my channel.

[@jherr]

I want to thank YOU for having me on!.

[@jarrahello877]

I want to thank BOTH of you for sharing your knowledge

[@SanjuKumar-ye8xz]

@@jherr currently I am watching No BS TS.😅😅😅😅😅😅. Thank you both of you.

[@pastasawce]

I Love jack!

[@imade_8515]

@@jherr thanks jack I subscribed in your channel you are very good teacher thanks brad also for hosting

[@JavierSuzuki]

Thanks so much Jack and Brad for your amazing videos and the meaningful work you do. Very grateful for how much I've learned with you!

[@EluLawlielt]

Love both of you guys, helped me a TON, maybe even changed my future. Don't stop doing the awesome work!

[@r-i-ch]

Love love LOVE Jack's content. Definitely great for stuff "beyond the basic" - Thanks Brad for letting him guest!

[@kamilstepaniak3091]

Probably the most talented tutor on youtube for FE devs! Fantastic video Jack!

[@Aftermathx25]

You are first person to have any real arguments against using class components. I have been seeking then for a long time.

[@tonimaunde]

Thank you both for being part of my growth in web development.

[@naveedalirehmani4135]

Zustand is an amazing library, I worked on a react project which used React Query in combination with Zustand and let me tell you they worked together amazing, I am very happy that Zustand is gaining the popularity it deserves.

[@bryanelliott9610]

Extremely excellent summary of the primary things to pay attention to when working with React! Really well presented and easy to follow. Thanks Jack! Subscribed! 👍

[@paras1kori]

Golden words! Honest and to the point content by you Jack 💯. Thank you so much for everything you do for us Brad ❤💯

[@Gamer-gw6nj]

Excellently handled all the matters. Brilliant Editing. Super clear video looks very high resolution.

[@khalidben9940]

This is super helpful.Traversy Media thank you for bringing Jack here.He is awesome as usual.

[@techhguy]

Collaboration of the year, thank you Brad and Jack 🙏

[@rogermanea2140]

Great vid, nice find! The concepts were illustrated amazingly, and were flowing in an understandable way

[@deathdogg0]

Surprised me when I click on this and someone else started talking to me. Thank you, this was actually really cool to watch. I've been working with react for not that long and Jack is a great teacher

[@rashelmiah100]

Loved the video. The presentation was great. Thanks Jack. It was super easy to understand. Also, Thanks to Brad for bringing this video to us.

[@ElvenIvy07]

This was gold! I'd love to see more things like this on the channel! Thanks to both of you!

[@youen5567]

Currently building a small project to learn react (and apollo) so I'm very thankful for such guidelines, thank you both (and I swear I will learn typescript more and add it to my project... soon)

[@naveedalirehmani4135]

This video was very helpful, Thank you Traversy for bringing us this amazing video.

[@TheBdemba16]

Jack good content as always. Been a subscriber for sometime, and it's good to see you on Brad's channel.

[@Meechl0uch]

Thank You for sharing your time with us to give us very necessary information.

[@AbayomiAishida-zb6il]

This is really amazing, I’ve been postponing for a while and finally watched. I’m excited I did. Thanks Brad, thanks Jack!

[@imdbelal]

I didn't have idea you are on Brad's channel until you thanked Brad in the end. I picked up this video from notification just by reading title. Thank you both of you.

[@ride_the_wind]

Amazing clear explanations at a very pleasant pace

[@be2wa]

Woah! Great to see Mr. Herrington here on Traversy Media! The "crew" is getting more and more awesome!

[@ievgeniibielkin]

thank you, Jack. It is really simple explanation of the mentioned topics.

[@arbaaz_777]

Class as always Brad. Many thanks

[@wunshon]

thanks Jack and Brad! You're great teachers! I leant a lot from the content!

[@d.christianrathjens7209]

Exactly what I needed. Thank you!

[@jkalvar]

Great video, great teacher. Thank you 👍

[@danilocorreia5104]

Such a good lesson! Thank you, Jack

[@nimmneun]

On point with the pronunciation of Zustand 💪 and thanks for the vid Brad & Jack 😀

[@BezzantSam]

Jack is the best and an amazing person in real life. I do love your channel as well.

[@russomaclaud6151]

Excellent class 📒I learned more with this video than in hundreds 💯

[@9622AX]

Very Helpful video. Thanks man!!!

[@rodanus7112]

This a really helpful video! Thank you so much for the great content!

[@m3speedking]

outstanding knowledge, great presentation, perfect video and audio

[@zoaybk]

You are always amazing and super helpful 🙌🏽

[@eduardshulkin1229]

Great overview. Much appreciated !!!

[@sjzz]

I have been working on React for about an year or soo professionally. And I have been following most these recommend do's and don'ts. 👌👍

[@BerserkedBear]

Awesome. I hope to see more of this. Thank you.

[@yasserbouanani2999]

That was fantastic, thank you so much for those golden tips.

[@sudoku37]

Always appreciate for such a great content :)

[@VenkateshMogili]

Great content. Thank you Jack and Brad😍❤❤❤

[@kumar-saurabh]

Thank-you so much Jack for this knowledge.

[@arthurmukwapatira4958]

Awesome! Simple and well explained, great work!!

[@CameraGuy19]

The first time I learned ReactJS was from Bob Ziroll. Bob's a clear guy, you can understand crystal clear from him. Unfortunately I couldn't find a ReactJS course from him on Udemy. This video is a blessing from Brad, thanks Brad ❤.

[@fabiofaria1327]

I love your videos. Always big help to improve my development! Thanks a lot!

[@ShaikMoAbdullah]

This was a very nice collection of tips. Thanks.

[@tech5956]

Great explanation , Thank you for sharing 😊

[@TechandcoffeeKe]

Great content , Great timing . Thanks alot

[@guvanchm3135]

Great video as always!

[@haruka3203]

I just got started in React and transitioning from a regular html/css/js developer. Things in React are just mind blowing. And I came here to avoid all the rookie mistakes and pro tip advances. Thank you soo muchh

[@onlineaid]

Jack this information was awesome dude. It needs to understand every react developer mostly for beginners.

[@qaiseriqbal2696]

Great content , thanks for sharing

[@exploits_foot3337]

Thanks for these tips, very helpful

[@jeromesnail]

These are actually really good pieces of advice. Thanks.

[@theatypicaldeveloper]

Very good explanation, great value for an entry level react devs

[@sjoerdvermeijden]

Thanks, this was very informative!

[@craigleppan7164]

Starting out with react. Very helpful and deep. Keeps someone like me on a good path or road map. 🙏

[@himanshuchoudhary7880]

Great Explanation 🤩

[@umairqamar2672]

Loved it !!!! This guy is super duper amazing !

[@kirksurber7262]

Learned a lot! Thank you!

[@JosephMaramba]

This format is totally working if it can bring in heavyweights like Jack. His channel has pretty awesome advanced React, TS videos. Bring in Dave Gray next with a frontend, backend or fullstack tutorial 😅🙏

[@leroyombiji5699]

I'd definitely vouch for Dave Gray

[@johnychinese]

Definitely, Dave is one of the best teachers out here

[@niloyrudra7905]

Very very useful tips! Thanks!

[@mikaeileghbal5695]

Thanx a lot. Your tutorials are amazing. I learn a lot from you.

[@omarkarim9298]

Colab of the MVPs of Programmer KZbin

[@kabagambedaniel2468]

thanks alot Brad and jack

[@PeterMumford]

Hey this was incredibly useful and informative. I'm following.

[@diegolanzarote97]

Agree to all of them except the UI one, I have encountered multiple cases where libraries do not cover the design team requests. Mostly all of the time it is better to organize well your code

[@ToddDunning]

So cool to see Jack here!

[@roman_k89]

thanks! very interesting and helpful!

[@hectorg362]

Such a nice video! Thanks for this!

[@gustavoaeidt]

This last tip was amazing. It clicked with what I have seen in many projects but it's not entirely on the engineering team. Material UI, bootstrap, etc are really hard to tweak bc most of their CSS has the "! important" attribute. But designers tend to want to leave their special mark on the layout "just because". If you are building software at the MVP stage I can't stress enough to use an UI library and follow along the design guidelines for that specific library. When the app core is set, then you can spend the resources to build your own design system and ui library but doing both on a tight budget when you don't have a clear picture of the software architecture is pure madness. Can't tell how many projects would have been spared from chaos by following this simple advice

[@ashish_prajapati_tr]

i can't wait to see it. 🤩

[@passionforkiteflying]

Excellent video on React practice!

[@phucnguyen0110]

This is a collab that I didn't see coming at all :O

[@Dave-dl8ey]

Stoked to see 2 of my favorite people overlapping! 😎👍

[@tayw6466]

I am a novice, I just finished a 12 week coding bootcamp where MERN was our final project stack, this type of content is really useful for someone in my position because I went from having my skill development be 100% directed by an outside influence, to being 100% my responsibility, this will help me gain a little bit of that structure back and give me a set of skills to reach for next. I cant say I understood 100% everything, but I understood enough of each subject to know what the first steps should be. I still have to review the course material because its so fast paced that no one could possibly absorb it all, I would be surprised if anyone was even able to absorb like 2/3rds of the material. But now I can review the course material and learn some typescript basics at the same time and see if I can translate the lessons from javascript to typescript. I think I am gonna try to redo my final project in typescript and see if I can follow all these dos and don'ts while I'm at it, that sounds like a fun next step. Cheers!

[@classicwannabe7710]

10:06 small correction - the question mark is called an optional parameter. It is equivalent to saying: put whatever type I define or undefined (e.g. someVar?: string === someVar: string | undefined). So when putting null under the address variable explicitly, typescript will complain

[@tadakuniyasuda8214]

I am newbie, and this kind of error scares me to use typescript. I know I should learn how “null” and “undefined” are different, but what is the solution for this ?

[@classicwannabe7710]

@@tadakuniyasuda8214 better not to avoid using it. When you start writing a code with Typescript and get used to it, you won't probably want to come back. I tried to maintain a relatively big project purely written in Javascript both on frontend and backend. Man, there were so many bugs that could easily be identified during compilation. Generally, undefined means that something is missing. Simple example is when you want to access any variable from empty object. Null usually means that something is defined but its value is nothing. So my point here is you should not put undefined explicitly under variables as a value, prefer null instead. However, when defining types or interfaces, it really depends on your code what you expect it to do

[@tadakuniyasuda8214]

@@internet4543 Thank you, I am going to learn typescript now.

[@diego0ji]

A M A Z I N G ! Thanks💙💙

[@saman6199]

Awesome tips. Thanks

[@darkmift]

Awesome team up!

[@sprintwithcarlos]

Typescript ugly???!!! Typescript is awesome!!!! Thank Jack, great video and also thanks Brad for inviting Jack. PS: I think that making your own UI library/framwork is not that bad and a great learning experience BTW

[@ralphmartynsamaniego7017]

I just started React a few months ago, thank you for the tips..

[@1000ylovers]

I wanna Thank yall for this amazing content

[@sweatypotato248]

Ohh, jack Its nice seeing you here

[@Frank2tek]

I'm a long time React developer and i totally agree all the thought discussed in the video.... 👌

[@Aaam1rK]

Great video, love Jack's content. Just want to point out that the `?` mark implies that the field could be `undefined`, not `null`.

[@EddyVinck]

Agree with everything here, except the last one in some scenarios. If you have a custom design which isn't already based on a library like MUI, it can be a real pain to customize the components to match your design. Great video! My preferred approach for custom designs is taking advantage of "headless" libraries such as Headless UI, Radix, and React Aria.

[@Issvor]

Regarding the last point, he didn't say don't make your own designs, he said don't make your own library

[@hamzahmd_]

You can even customize your designs with Styled-Components in combination with libraries like MUI.

[@markokafor7432]

Or just opt for tailwind

[@alexmachin1785]

HeadlessUI and Tailwind is my favourite combo, I've just started using and it's so cool and really easy to build components.

[@Bylethdev]

i'm on the same boat as you, but i think that one specific "dont" is aimed to either new devs or devs that dont focus too much on front end. for those ppl, things like MUI helps a lot.

[@VerticalHub1]

Thanks it's good to hear am on the right part.

[@robysoriano2956]

learned so much! thanks!

[@kirylbehansky1315]

Nice one about dependency arrays!

[@edwinschutjes8878]

Great video as always. :) I do think the last topic is very debatable. I've worked on many projects where building out a custom UI library/Design System made more sense. But that choice involves a lot of factors like the design itself, future plans for the app or the company and even who needs to work with it or maintain it.

[@rajatgupta2625]

i agree, it depends on the design the client wants, i worked in a project where we used Material UI but the design they wanted was so customized that we essentially had to fight with material ui components to look that way which defeated the purpose of using them in the first place.

[@edwinschutjes8878]

@@rajatgupta2625 Yea I know that struggle. An existing UI library is great to work with, as long as you can mostly confirm to those existing components.

[@shivamjhaa]

AMAZING VIDEO! One addition might be that react does not use triple equals but uses Object.is().

[@vithushanjeyasothy1883]

Thank you Jack for the great React content

[@alikisang827]

Mashallah! This is a great video @Traversy Media I have been following you keenly for somewhile and I can adhere that this is my best KZbin Channel so far and it has thought me a lot a Software Developer. One day I am gonna develop a big website Inshallah. Big love from Kenya.🚀🚀😍😍

[@Klivdx]

Golden advices!

[@jjrise]

fantastic video!

[@paolotessarolo8927]

Very useful, thanks