6 Pro Tips from React Developers

[@surajvijay1937]

0:21 - "Use functional components" - Cam Jackson 0:58 - "Keep your components small" - Randy Coulman 2:15 - "Understand how to handle 'this'" - Cory House 4:00 - "Use a function in 'setState', not an object" - Sophia Shoemaker 4:38 - "Utilize prop-types" - Adam Jahr (None other than the guy who made this video) 5:11 - "Use React Developer Tools." - Brian Gates

[@artemmakatera8663]

One useful tip.Never use use index of array as a key when you map data to list. It is better to use unique id as a key. Because if you need to add new element as a first element. React will compare it with previous key and react won't see the diiference between items and won't rerendered items with similar keys in similar place. If you need to create new list item before saving to server it' woul'd be better to use uuid or something else to create temporary fake id(for ex. `fake_${uuid()}`).

[@yevhenkozlov286]

nope. key is only about update-vs-recreate difference(performance thing). so in case mentioned when you insert element into 0 position it will lead all elements are updated. while if using meaningful "key" only element just added will be rendered(and all other will stay untouched). there will be never a case 'won't rerendered'

[@nageshwarreddy4530]

You can also use Date.now() as key

[@vickylance]

@@nageshwarreddy4530 That doesn't work because Date.now() will be the same for all the items in the list. Computers are fast :)

[@vickylance]

@@MikeCOYS If you get id from the response data then it's well and good. But there are places where you don't have the id or you don't even make an API call you just iterate over some generated data.

[@f.k.1484]

Issues would come with sort anyways so an id or a way to uniquely identify is always an option depending on the exact requirement

[@modinaleksey4073]

Pro tip: don’t try to create large reusable components, in one day you will find yourself trying to understand what happens there. Only small components like buttons, inputs and other parts of interface can be really reusable.

[@danielkhoroshko4422]

At what minute do the pro tips start?

[@longingheart77]

Spicy

[@jguillendev]

Jajajaja

[@hannad]

Use function in setState only when state update requires prev state. Otherwise use object in setState

[@nhulongctk10]

not really. setState is a async function. some case we need to use function in setState

[@handleOfThy]

I see you are a man of culture, rocking that Opeth tee

[@sergiogusto]

this.setState has a callback function. In this callback, the state is the data is exactly updated. So then you can do all that you need with actual data from the state. example: this.setState({ id }, () => console.log('do something with this.state.id') );

[@f.k.1484]

Also this is Syntax only. Syntax is like the most basic tools you should be able to handle in order to move to patterns and then write clean reusable code imo

[@marcpeace204]

Thanks.

[@arhabersham]

This video is BEAUTIFULLY illustrated, + the voice cadence background music separates it from the monotone style of others. The content is so relevant, and illustrations are INCREDIBLY useful and beautiful. Great job!!!

[@Amin52J]

These are some basics you need to learn before jumping into a project, so they're not pro tips. :-|

[@RealRurik]

Don forget to use hooks to keep it even more simple, it didn't mention it because the video is old :).

[@AlanDarkworld]

Nice video. The most important tip that I can provide for react devs: use TypeScript. Always. All the time. It will prevent so many potential errors.

[@jmcauhy]

I'm starting to learn React now, do you think I should learn it with TypeScript already?

[@ychinamale]

@Vue Mastery what software do you use for the animations on your code snippets? e.g. from 1:37 to 2:11

[@bharathprakash410]

React hooks is the best option 😍 for the functional components.

[@KazSadeghi]

There's another version of setState where you pass in a callback that should be called when the state has actually been updated. the first argument is the state update, the second is the callback. This allows you to change very little code from the version that only has an update, merely passing in what the function should do afterwards. For more information of this kind of async programming, see Continuation Passing Style.

[@nabilhaouam8497]

You're right , however it can crash when you have multiple setState's, as you don't know which finishes first. Creating the arrow function before the render is the least problem-causing way .

[@marvinandia1214]

Mmm i don’t know if these are “pro” tips

[@taylorgriffin6269]

yah these definitely seem pretty standard and also opinionated.

[@MikeCOYS]

They’re more “common sense” than pro tips. It depends on the situation to use what’s best, but he makes it sound like you should only use the one he points out. One example perhaps he should also list the disadvantages but he doesn’t mention any. Arrow class functions is good but not so much when you’re trying to mock it in a test.

[@totalolage]

I've literally been a react dev for 10 days, having never used it before that, and I've figured out all but functional components and functional state set on my own. I was looking to improve, not be told what every tutorial tells you.

[@franciscoayala6923]

do you have another alternatives to "pro" tips? :)

[@MisterCuriusController]

wait why a video about react in this Vue channel?

[@farzadsole3784]

Good 1 :P But that's their company name LOL

[@geovannyrios6751]

same question

[@MisterCuriusController]

@@farzadsole3784 oh I see, Im not angry or hate react or vue. Im just curios why.. So Vue and React are the same company?

[@borismateev3198]

​@@MisterCuriusController Vue and React are both front end frameworks that allow developers to more easily build complex apps. While they accomplish the same objective, the two have different approaches and techniques, so looking at what people are doing in react can give vue developers new ideas/perspectives.

[@jorox8948]

logMessage=()=>{ //blablabla } works without binding 3:15

[@lexsoft3969]

Tip 7 : get ready for Hooks, the upcoming feature that will solve existing problems according to React team. It will probably mean that we will say goodbye to classes esp when creating new codes.

[@gracewood6768]

When i used that. wow , it became clearner! as a begineer reactjs programmer, that made my life easier, but my projects were all into oldies, so i had problems on adapting the classic react thingy

[@thefakedeal]

I learned react after hooks were introduced, so I never even learned class components

[@neihe25]

Does the avatar class at 2:07 really work? Because you insert as prop props.user and then you want to access props.user.name. Wouldn't it result in can not read property of undefined? Because you should use props.name??

[@taylorgriffin6269]

No. The Comment component is passing the user object to the UserInfo component and the UserInfo component is passing the same user object to the Avatar component so Avatar has access to the user object that has a property 'name'. props does not become the user object. props is an object that has the user object as a property. does that make sense?

[@seanflanigan7]

@@taylorgriffin6269 Thanks. I had to write out the avatar code sample to understand it: jsfiddle.net/3tcxjof1/

[@IgorBrandao]

Great tips, and to add on tip #5, you can use this.state after this.setState as long as you use its second parameter which is a callback function that gets called when the state is set. this.setState({ someFlag: true }, () => this.state.someFlag ? console.log('isTrue') : console.log('isFalse')) // will print 'isTrue'

[@jakub7048]

that's right :)

[@sachinjasrotia2279]

great idea to explain the tricks....quick fast and effective way....thanks bro....

[@pramodjodhani]

Which software do you use to edit the videos?

[@ShanjaiRaj]

With headphones, this video looks perfect

[@KajiTetsushi]

Nice! I use all of these tips on a daily basis, *except* #4 (3:58). I didn't know functions in _this.setState_ was a thing. The no-guarantee of instant state change is because _setState_ is asynchronous, right?

[@VueMastery]

Yep that's correct!

[@hyoukuriyama1071]

now, i know!

[@rayane4975]

I tried callback and functions but its still asynchronous ... :/

[@sugarlife1246]

medium.com/@voonminghann/when-to-use-callback-function-of-setstate-in-react-37fff67e5a6c Check this article and you'll get it!

[@sayamqazi]

finding out about that function in setState was the best thing for me.

[@EdgieMan]

Hello. Thanks for sharing. I have a question regarding tip No.1 and all others. You recommend to use functional components, but using React classes in the following tips. Could you clarify when it is necessary to use classes if at all, and how to manage data within an app if not through states?

[@leonardocosta6038]

Eduards V He recommends using functional components when the component is stateless. One of the best ways to manage state is by using Redux.

[@tommygecko]

or if it doesn't use life cycle methods

[@HanYou2]

Use functional components when you don's store data on this.state and only use the received props. Usually stateful components are called 'containers', and stateless components are called 'components'. You use the containers for state management. Redux is a big higher order components which does state management.

[@platek549]

When should you use class based components instead of functional components

[@lordcheetos]

They're just old, and less updated

[@samirmahmudlu]

Thank you so much. Can u do next video about prevent additional ( not required) rerendering? Please.

[@JD-ug9gv]

well done. short, sweet, informative. bongos were a little distracting

[@MrLarryQ]

Great stuff here. May I ask what video editing software you used, your transitions and code transformations/code splitting are very professional.

[@VueMastery]

Thank you :) A combination of Keynote and Screenflow were used to create this video.

[@RomanOstolosh]

Can I use static methods od a class to define prop types instead?

[@wise_nut]

This is all I've wanted to know about since I'm stuck on my project........ ....... thanks Adam!!!!!!!! your voice's so good

[@user-hg5qh3ni3f]

Awesome tips for a beginner like me. thanks

[@vaghelabhavin]

Tip 4 is literally a PRO Tip. Thank you.

[@innovationscode9909]

Just use Typescript insteqr of prop-types. It will help you prevent type errors over all...not just in props...

[@mihirvaghela3479]

Nice video, more than I expected

[@borisangelov44]

Very nicely said! Good work. Just one note - React is a library.

[@prakashale1627]

Great tips for beginners

[@dcairol]

Good tips! Tip #5 not needed of you use Typescript

[@RagazzoKZ]

How to pass arguments to function in case 3:30 ???

[@DucHong]

at @3:30 case, it's a case when logMessage doesn't require args, in case you do, simply write arrow function in onClick props, something like onClick={() => this.logMessage(arg1, arg2 ....)}

[@RagazzoKZ]

In this case it creates a new function for each rendering, that's no good, But I don't see any idea for workaround that.

[@oleksandrkryvosheiev4915]

@@RagazzoKZ you can write like logMessage = (args) => () => { ··· } And in render method this.logMessage(args)

[@kurororushirufuru2850]

*EDIT:* My apologies for the heads up. I think it would be the same as a regular function. For example: logMessage = (message) => { console.log(message); } Then in render method: { this.logMessage(message) } *NOTE:* In Babel, you may need the package *@babel/plugin-proposal-class-properties* to transform arrow functions inside classes.

[@frankrodriguez6021]

If you want to pass arguments to a function the best way to do it is by using props of the component. You can checkout this gist to see an example: gist.github.com/frankrod/4e3c01fb2f8f20b3ca0474ec512dece7

[@mohouyizme]

Useful information. Thanks!

[@ashishrathi9600]

Nice content, I liked tip 4. Thanks for sharing

[@returnZeroo]

How did you made these presentations? Can you give me suggestion please?

[@ghayoorulhaq2241]

He's using keynotes

[@dandogamer]

I've been using react for less than a week and use all these tips :) Ps. Still prefer angular over react

[@JBuchmann]

5 months later, do you still prefer Angular? Just curious because I'm an Angular guy who recently is getting into React

[@manafront]

do you have a course? im in lambda and react is really making me nervous

[@_JocelioLima]

Hey, do you have some tip about using something like proptypes for react context api?

[@sergiogusto]

use Redux. Bytheway, to make your code cleaner you can use this import { string, number, func... } from 'prop-types;'

[@RobertBrunhage]

Great video! What program did you use to animate and write out the code?

[@VueMastery]

Thanks! Animations are done in Keynote.

[@burakselvi4515]

The Vue channel's most viewed video is about React :)

[@jugnush]

what music is playing in BG ?

[@VishnuASankaran]

Using a functional component may not be a good choice if you consider the rendering performance. The component re-renders every single time, its parent re-renders. So, I would recommend using React.PureComponent for smaller components which has primitive prop types.

[@neihe25]

In addition to tipp five you don't need to use proptypes another way is to use interfaces for props and even for the state maybe it is something worth to mention.

[@NoName-j8j3o]

Very helpful video!

[@rohitpatil3679]

Can I get some documentation on this ? It would be really helpful

[@MD-xx6ob]

prop-types is useful but i prefer to use a superset of JS like typescript to declare component props using interface

[@lexsoft3969]

Great. Typescript should be the future of client-side scripting. It seems that you have been successful in using typescript in React.

[@mattmarkus4868]

Does VueMastery have React training too then?

[@VueMastery]

We made this video before we chose to focus exclusively on Vue.js :)

[@tim_t]

Thanks, Justin.

[@HostDotPromo]

Time to learn react more in 2021

[@-ejs-]

Hey thanks for your tips!. I'm kind of new into the react world and i'm having a little bit of trouble with components and functional components. I'm using redux to handle application state but the problem is that every time an action gets called, all child component gets rerendered and it's causing me some performance issues. I solved this by using pure components to avoid unnecesary renders but i don't know if there's a cleanner way to handle it. What do you think, is there a better solution?, because almost every post i read it says that i should stay away from pure components but no idea why. Thanks!

[@golfmc7941]

Emilio Jeldes I am more of a vue person but it sounds like you may need to key your child components.

[@devmrin]

For cases when you need state - however don't need your stateful component to rerender - shouldComponentUpdate is a GODSEND! It alone will improve your apps performance many fold!

[@oficialdesigner]

Thanks, it's really helped me now!

[@edinpuzic]

Tip 3: You can install babel plugin transform class properties (babeljs.io/docs/plugins/transform-class-properties) then you don't need to bind this in ES6 classes. Right?

[@VueMastery]

You can utilize that plugin to define properties inside of class definitions themselves as static class properties. Don't forget to update your .babelrc file with that plugin.

[@hichdima]

is functional components advise still relevant in 2019?

[@Yetipfote]

Yes. But now you can scrap the "if you don't need life cycle methods" part, because via hooks there are possibilities to emulate life cycle methods easily.

[@pokegaiyui]

This was super useful!!

[@CPlayMasH_Tutoriales]

I see the point of functional components, but I prefer extending from PureComponent in favor of performance

[@davidscarios]

Very usessful, Thanks

[@csanadtemesvari9251]

Now you know how to React.

[@rammaheshwari3008]

Great Information

[@asdfkerub]

tip 4 got me confused. Does this actually change the state key value? Why does is seem like your just changing the key value to its previous value? Also, what is the use of props parameter if it not being used? Sorry im a bit confused here and this seems like a useful thing to know.

[@asdfkerub]

Also, will tip 4 work if you are completely changing the key value?

[@hrafars91]

You can do like so: return {...previousState, toUpdate: props.whatYouWant} Then you ensure you only change what you want and let the remainder of the state be whatever it might become.

[@CoryTheSimmons]

Here's a really simple demo with some comments. codesandbox.io/s/32kznjxkx6 If you do React dev for a while you'll 100% run into wanting to adjust state AFTER some other state has been modified, and the setState(prevState => (...)) thing is a really convenient way to do it. Regarding the signature, setState can accept a POJO, or a function that returns a POJO.

[@MrJasonFrank]

Thanks for that demo Cory!

[@HanYou2]

​@@CoryTheSimmons For this specific case, updating state after another state update, it's good to know that setState also has a callback function, to be sure the previous state changes are already applied: // this.state.toChange === 1 this.setState( (prevState, props) => ({ ...prevState, toChange: prevState.toChange + 1 }), () => { this.setState((prevState, props) => ({ ...prevState, toChange: prevState.toChange + 1 })) }, ) // this.state.toChange === 3 -> but if you do this too much, you run into callback hell

[@vishal_taywade]

You shared very useful tips.. 👍 We'd like to see more such of.. Thanks

[@jaimenoelalvarezluna3500]

if only I had seen this video when I started with react everything could have been different. I've worked with React for a year and 5 months, I learned this tips and some "good practices" by try and error. Now with getDerivedStateFromProps it became a little bit tricky because nobody had establish a good practice.

[@YashGupta-dr5re]

With react hooks (like useState) the .this boilerplate is going to be a thing of history.

[@elevatestudio8710]

very educating

[@eduardonakanishi]

Nice vídeo, but most of the pro tips van be found on the “FUNDAMENTALS” section of the react docs

[@rikenshah1861]

😂😂

[@fullstack_journey]

And that's the power of react docs hahah

[@monsieurm2904]

Hello, thank you for your tips !

[@TheYari1210]

Wow! Amazing tips... Great vid thanks!

[@nlgachu7536]

Use promises instead of callbacks. Use async/await keywords. I believe all custom functions/methods should be async by default to avoid potential unnecessary refactor in future. Dont know about possible performance issues. Use Immer library to update complex state by simply overriding object property.

[@4rled]

Proptypes or flow?

[@erickgeneric]

I’m confused. I thought you could use state (useState) in a functional component. What am I missing

[@Eelmascapito]

Thats a hook

[@137dylan]

Video was made in 2017. useState (hooks) were released in 2018.

[@JAdamMoore]

This was a very well done video. You should be proud.

[@jakestewart7079]

Could tip 5 be avoided by using TypeScript?

[@paragjyotinath]

Yes, You are right.

[@codewithming]

of course you can

[@jaimesanchez118]

Yes. And with TypeScript you type props, states and more. Actually, I am using them together and it feels really good.

[@taylorgriffin6269]

Yes, but TypeScript does have a learning curve that isn't really necessary if you aren't working on enterprise applications. Like, I am not going to learn TypeScript just so I can strict type hobby projects. But if my company wanted to convert the entire codebase over to TypeScript I would see the value in it.

[@KunglawAdy]

3.02 really you dont need bind that function ?? woooww i need to try it

[@andrazkos8309]

Stop using setState for anything but internal micro-state of the GUI (for example: input has value state, when onChange triggers, you should copy this internal value state to the proper place into the real store). This way you keep the performance. For everything else, use mobx-state-tree (MobX upgraded into a structure to make it as robust as redux without the useless boilerplate and copy pasting of redux). Then you just trigger (onChane) an action directly on the store with value as the parameter -> gets written to the store, then automatically updated in the GUI (by simply wrapping the functional component into a mobx-react observer).

[@rallokkcaz]

Andraž Kos I was leaning towards mobx for React dev but this sounds interesting.

[@ThiagoTAV]

Very good tips, thank you.

[@废柴大叔]

Thank you!

[@MosesMatsepane]

Great stuff bro! Thanks!

[@MrRuzzgar]

Thank you man

[@fideltorres399]

Props-types, what about Typescript instead?

[@jerryjeremy4038]

I just subscribed! I am very new to reactjs and i want to start at the correct way. Thanks

[@naveed-h]

Who cares about the video when the music so damn good. I'm dancing sice like forever!

[@moloodayat6039]

Greate tips 👍👍👍

[@ahsanusman3993]

awesome work!

[@eugenhildt910]

If you have a template (functional component) then just pass through the props. Let the template decide what you need out of props. Also use Redux. With Redux you won't ever need to deal with setState.. well mostly. React + React-Redux + Redux-Act = Your best Friend.

[@rallokkcaz]

Eugen Hildt redux is hell.

[@thisaintmyrealname1]

Great video man!

[@tronguctran1433]

thank for video , It is very useful

[@VinayKumar-ur4ev]

First things first, react is a library not a framework

[@BuddikaChaturanga]

Use object destruct pattern Use default valuse library

[@IntelsCreed]

Nice ! Important tips...but I don't know if they are pro tips !

[@Storkz0re]

This reminds me official documentation clearly

[@hyoukuriyama1071]

thanks brother for the tips! good video!

[@irasanchez1265]

Knowing when to break things apart and not get too carried away is tough for me.

[@Teardrop-u4z]

Thank you cap!

[@Spoolie]

1:56 that in my opinion is part of what's wrong with react "developers". That is poor code. You've now coupled your 2 "reusable" components to the data structure and it is no longer very reusable at all. Just because you can write code doesn't make you a developer. Think about the long term effect of things you do and you'll avoid poor code like that.

[@gab_shirohige]

I know it's a bit late but.. WTF are you talking about? The 2 components that he separated is still reusable. You had a monologue of how "bad" are the other developers yet you didn't explain shit. People like you are toxic to work with.

[@cakradanusedayu910]

Thank you for sharing..