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!

[@Aftermathx25]

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

[@r-i-ch]

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

[@tonimaunde]

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

[@paras1kori]

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

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

[@kamilstepaniak3091]

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

[@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! 👍

[@Gamer-gw6nj]

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

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

[@khalidben9940]

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

[@rogermanea2140]

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

[@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)

[@ElvenIvy07]

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

[@techhguy]

Collaboration of the year, thank you Brad and Jack 🙏

[@Meechl0uch]

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

[@naveedalirehmani4135]

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

[@ievgeniibielkin]

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

[@ride_the_wind]

Amazing clear explanations at a very pleasant pace

[@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. 👌👍

[@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!

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

[@wunshon]

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

[@TheBdemba16]

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

[@m3speedking]

outstanding knowledge, great presentation, perfect video and audio

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

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

[@nimmneun]

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

[@russomaclaud6151]

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

[@arbaaz_777]

Class as always Brad. Many thanks

[@be2wa]

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

[@BezzantSam]

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

[@VenkateshMogili]

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

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

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

[@kumar-saurabh]

Thank-you so much Jack for this knowledge.

[@jkalvar]

Great video, great teacher. Thank you 👍

[@theatypicaldeveloper]

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

[@onlineaid]

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

[@craigleppan7164]

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

[@eduardshulkin1229]

Great overview. Much appreciated !!!

[@ShaikMoAbdullah]

This was a very nice collection of tips. Thanks.

[@arthurmukwapatira4958]

Awesome! Simple and well explained, great work!!

[@9622AX]

Very Helpful video. Thanks man!!!

[@fabiofaria1327]

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

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

[@danilocorreia5104]

Such a good lesson! Thank you, Jack

[@rodanus7112]

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

[@jeromesnail]

These are actually really good pieces of advice. Thanks.

[@zoaybk]

You are always amazing and super helpful 🙌🏽

[@d.christianrathjens7209]

Exactly what I needed. Thank you!

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

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

[@BerserkedBear]

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

[@yasserbouanani2999]

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

[@passionforkiteflying]

Excellent video on React practice!

[@exploits_foot3337]

Thanks for these tips, very helpful

[@niloyrudra7905]

Very very useful tips! Thanks!

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

[@kirksurber7262]

Learned a lot! Thank you!

[@sudoku37]

Always appreciate for such a great content :)

[@tech5956]

Great explanation , Thank you for sharing 😊

[@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!

[@mikaeileghbal5695]

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

[@TechandcoffeeKe]

Great content , Great timing . Thanks alot

[@qaiseriqbal2696]

Great content , thanks for sharing

[@guvanchm3135]

Great video as always!

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

[@Frank2tek]

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

[@sjoerdvermeijden]

Thanks, this was very informative!

[@ToddDunning]

So cool to see Jack here!

[@umairqamar2672]

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

[@ralphmartynsamaniego7017]

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

[@roman_k89]

thanks! very interesting and helpful!

[@himanshuchoudhary7880]

Great Explanation 🤩

[@hectorg362]

Such a nice video! Thanks for this!

[@shivamjhaa]

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

[@saman6199]

Awesome tips. Thanks

[@Dave-dl8ey]

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

[@kabagambedaniel2468]

thanks alot Brad and jack

[@novailoveyou]

Good content! Props to ya guys as always One correction tho at 10:06. The questionmark like this in typescript means that the key can be missing so it's value is possibly undefined. If you also need to include null in the range of values, you'd want to use what's called enum in typescript like this: string | null So an example would be type TMyType = { myKey: string myAnotherKey?: string | null } const myVal = ({ myKey, myAnotherKey }: TMyType) => {} // accessing myAnotherKey would give you either undefined, or string, or null

[@coderlicious6565]

I like what you did with "Props"

[@PeterMumford]

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

[@kirylbehansky1315]

Nice one about dependency arrays!

[@Aaam1rK]

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

[@pavelisel4127]

Loved the video. Only thing was that the usage of ? in typescript is to declare that the value will be undefined. If you want to declare a null you will have to actually set that type. Something like name: string | null

[@VerticalHub1]

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

[@darkmift]

Awesome team up!

[@robysoriano2956]

learned so much! thanks!

[@FahadUllahKhan-my9ze]

Thank you, at least now i know how to use dependency arrays correctly

[@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.🚀🚀😍😍

[@1000ylovers]

I wanna Thank yall for this amazing content

[@vithushanjeyasothy1883]

Thank you Jack for the great React content

[@yokunjon]

Thanks for the video, even though lots of the stuff you talk already explained even in older React docs (there's a beta one iirc). But main culprit I believe is, people rather than reading, try to use their knowledge from other libraries and frameworks, which make them misjudge how React works. Unlike many other, React has no magic tricks (except jsx), it is plain javascript and some clever stuff like hooks. So, if one knows any programming language, not just javascript and knows basics of React (which can be read from docs), it is pretty trivial task to understand what's going on. I'd say this is the gem of the React, it being a library this way. Anyway, again, thanks for your efforts. I've seen some people doing some of those mistakes even in production, which I think is unbelivable; so having videos like this really helps in that matter (atleast that's what I hope).

[@phucnguyen0110]

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

[@ashish_prajapati_tr]

i can't wait to see it. 🤩

[@paolotessarolo8927]

Very useful, thanks

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

[@omarkarim9298]

Colab of the MVPs of Programmer KZbin