8 Tips For Getting Better At React

[@syntaxfm]

The 8 tips in order. 1. Setup Linting @ 1:00 2. Set propTypes & defaultProps @ 4:15 3. Know when make a new component @ 6:00 4. component vs pureComponent vs Functional Stateless Component @ 8:14 5. React DevTools @ 11:27 6. Inline Conditionals @ 12:30 7. Use Snippets @ 15:00 8. Learn how React works @ 16:25 To learn all about React, check out React 16 For Everyone goo.gl/MkRA11

[@maxipop1000]

JS ternary is: condition ? expr1 : expr2 not condition : expr1 : expr2 :)

[@mathewcohen3061]

Oh good, someone else point this out.

[@goblinlordx6108]

On 4 your explanation of PureComponent is pretty far off. So far off I would say it is flat out incorrect. React does no such thing as "deep checking". A component will render whenever render is called. There are specific conditions that cause this but in general it is from setState being called within the same component or a parent/ancestor. Once render is called on a component, it will call render on child componens. There is no checking here at all. PureComponent just extends the Component class and implements the shouldComponentUpdate hook. It implements this using a shallow comparison of all props passed. This check is shallow so for objects/arrays this will impact things negatively if in the parent an object was modified instead creating a new object (modified has same reference). This would cause the shallow comparison to pass and it would prevent rerender. When used properly, this prevents further rendering of a branch of the component tree (where the shouldComponentUpdate hook stopped it). Either way... I kind of stumbled on your videos but for someone teaching the material I am pretty shocked at the way you explained it.

[@nemethmik]

Goblinlordx, you might be right, but, believe me, with even his errors here and there he is much smarter than most "star" Udemy trainers on React/Redux/JS. Udemy courses were a big disappointment to me.

[@goblinlordx6108]

@@nemethmik I can't really comment on anything Udemy related as I have never used Udemy before. I completely believe you though.

[@hamzahajji5814]

14:20 line 56 the right syntac is condition ? exp : exp2

[@syntaxfm]

Ugh. I can't believe I did that. Thanks.

[@academiereparation3662]

I thought this is a new ES7 feature :)

[@KhogaEslam]

i was about to write that comment too :D

[@ubibecauseofai7864]

Great video - this was perfect for someone like me who is bored with the beginner tutorials but who isn’t quite knowledgable enough to be considered an expert.

[@DEVDerr]

9. Use Typescript and replace propTypes with interfaces :)

[@DaveCool247]

Good stuff Scott! I'd also recommend prettier. I just switched to it and it is LIFE CHANGING. Set it up to format on save and you'll never want to code JavaScript without it again.

[@syntaxfm]

Def! Even better is the Prettier plugin for ESLint.

[@luisrodriguezcastro3803]

I am very very glad you create your themes based on Wes Bos theme. Yours and Wes Bos's are the only themes that don't make my eyes hurt. Great video.

[@cis84muz]

We want more! :) What I am missing is a tool that would show me a tree of components of my application in graphical form. You know, I have 50-60 components and I start to forget which components was related to which. So a tool that would generate me a road plan of my work.

[@invntiv]

React Dev Tools for Chrome extension will do this for you

[@SowedCastelli]

Thank you for the great pointers. Man, your audio setup is amazing!

[@AlistairCerio]

In setting propTypes, how do you handle props from Redux? These are props from mapStateToProps & mapDispatchToProps? Do you add them to propTypes everytime?

[@Skywalker37ful]

Thanks for the informative video, what's the theme of vs code you're using?

[@etayluz]

Regarding the use of inline conditional statement to render a component (minute 12:35), isn't this going to insert and remove the component from the DOM in real time? Isn't it better to hide and show using CSS's style={display: 'none'} from a performance point of you? I'm not disputing the merit of inline conditionals - just that in this specific use case it does not seem optimal.

[@syntaxfm]

If you just have display none that component and all of it's children will be rendered by React. In this instance if I'm not an affiliate, why would I want to render that component and all of it's children only to be not displayed. Also if the user isn't an affiliate, they might not have the data requirements to make that component even render correctly. IMO this is the perfect way to use inline conditionals.

[@yashone7]

eventually, there will be some files with long lines of code? Or not? extracting component logic for reusability is really tricky

[@syntaxfm]

You can extract all kinds of logic now with React hooks.

[@patrasculucian2403]

4:43 - Referring to "userIsLoaded: false,". It is the only pair from that object. Why do you get an error if you don't put a comma there?

[@lorenzogiulioni9475]

maybe I'm late but it's about trailing commas on multiline statements: medium.com/@nikgraf/why-you-should-enforce-dangling-commas-for-multiline-statements-d034c98e36f8

[@Zombieskelper]

What is putting the sizes of the imports in your file?

[@syntaxfm]

Import Cost. It's a VSCode extension.

[@lsagar]

Do you have tutorial for making website with react like the one at 0:30

[@thatguynar]

What plugin did you use to show the compressed file size?

[@KhogaEslam]

i like tools you are using. 1 comment is about tip @14:50 conditional rendering works with false, null and undefined values. but, Not 0 (falsely value) it will just render. ex: {myArray.length && } will always display MyComponent as if length is zero won't be considered as False condition

[@derocknc]

what font are you using to have the arrow function connect like that?

[@coffeegerm]

derocknc Fira code with litigations enabled

[@sangeethks554]

Which is that vs theme??

[@liquidtags]

Search for level up tuts theme

[@NoelTorres_noletorious]

its crazy to think how far react has changed since 2017.

[@sarscov9854]

I'm seeing this in 2021 lol. They didn't use hooks back then or have useEffect? Damn.

[@JasonSchoeman]

Nice video, gave me very good tips. Thanks a lot.

[@dragerot]

Thanks for the video. Very good tips

[@alekseikorkh9010]

Hi Scott. Thanks for the great video !:)

[@ahmadaziz1800]

Which theme are you using?

[@jeffersonribeiro1669]

whant to know too

[@jeffersonribeiro1669]

found it, he made it: The Level Up Theme. marketplace.visualstudio.com/items?itemName=leveluptutorials.theme-levelup

[@snugglepuff33]

Wow these are some really great tips! What color theme is that?

[@syntaxfm]

The Level Up Theme. marketplace.visualstudio.com/items?itemName=leveluptutorials.theme-levelup made by yours truly.

[@neoesm]

“Component verse purecomponent verse a stateless functional component”

[@telinixinfopvtlimited7519]

How can we use react redux with laravel it is good for scalable application like admin panel ?

[@syntaxfm]

Good Q. I haven't used Laravel much myself so I'll need someone else to answer if possible.

[@merodiro]

Balaji Pastapure Php artisan preset react And then add redux as normal

[@emmanuel4699]

where do you buy your shirts? They're so nice

[@syntaxfm]

Good q. Mostly H&M. Occasionally JCrew, but only the outlet really.

[@engelshentenawy]

What is your vscode setup ?

[@jeffersonribeiro1669]

Whats the name of your editor code theme?

[@syntaxfm]

Level Up official

[@manuelpascual7063]

I use native javascript default param values instead of default prop types. Anyone else following this approach? It saves me the headache of declaring another object and obviously lines of code 🤓

[@mouadbaha-eddine9471]

What color schemes are u using ?

[@syntaxfm]

The Level Up Theme. marketplace.visualstudio.com/items?itemName=leveluptutorials.theme-levelup made by me.

[@mouadbaha-eddine9471]

thanks it's cool

[@Daijyobanai]

Going to come back to this video once I've gone through the React 16 4 evry1 challenge. Cos some of this just bounced right off.

[@willy-mp5bm]

no dangling underscore! about ~4:30! Bad!

[@syntaxfm]

Why is it bad? What about it is bad? Is it just that a linter said not to use it?

[@papa_ethan]

9) Always do it in Typescript.

[@syntaxfm]

Agreed!

[@vamshicholleti6757]

Can anyone tell me that "How can we get directory path by clicking browse button in Reactjs" ??

[@Vincepp]

9. Start breakdancing.

[@syntaxfm]

I can't say it doesn't help.

[@benbaldivia9203]

The explanation PureComponents in 4 was incorrect. React does no such thing as "deep checking". Once render has been called on any component (usually by a call to setState) it will call render on all children. The children will do the same and in this way render the entire tree of components. There is absolutely no "checking" involved here at PureComponent extends the shouldComponentUpdate hook. It is implemented in PureComponent by doing a shallow comparison on all props. If this shallow comparison of props passes (all are determined equal) it will prevent calling render on that component. In that way, it will prevent rendering all children (because render isn't called initially on that component). The performance gained is from preventing rendering and not from preventing any sort of checking or "deep checking".

[@syntaxfm]

I'm not sure I get what your problem is with my explanation. reactjs.org/docs/react-api.html#reactpurecomponent. PureComponent prevents renders by not checking prop difference more than 1 level deep. "React.PureComponent implements it with a shallow prop and state comparison." You might be getting hung up on the word phrase "deep checking". "There is absolutely no "checking" involved here" - React's official docs disagree with that statement. It's a shallow prop comparison.

[@benbaldivia9203]

From that same page: "The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison." In component, "shouldComponentUpdate" is not implemented. It does nothing. When render is called on a component, it will trigger a state change on children. The state change will trigger calling render. There is no checking going at all in "Component". The notice is simply saying that the checking that IS done in PureComponent is only shallow. It is not saying that it does "deep checking" in Component. In fact, it specifically states it "doesn't implement shouldComponentUpdate()". Here in github we can see where "shouldComponentUpdate" is called. We know the API is return "false" to prevent calling render and return "true" to indicate render should be called. github.com/facebook/react/blob/dbd16c8a9624731a5e4ecadc9eef6c0e2d225d84/packages/react-reconciler/src/ReactFiberClassComponent.js#L228 (note this code was much more strait forward before Fiber was introduced) We can see here, when "shouldComponentUpdate" is a function type (basically, when it was declared) then it will call it. A few lines down you will see "ctor.prototype.isPureComponent". This is a simple flag which PureComponent adds to the class. When this flag is set, it returns the result of "shallowEqual" of props and state. This is "PureComponent"'s implementation of "shouldComponentUpdate". If "shouldComponentUpdate" is not a function (default of any Component as it would be undefined if not declared by dev) then the result of this is simply to return "true". As we stated earlier, when "shouldComponentUpdate" it simply means "go ahead and call render". There is absolutely no additional "checking" and certainly no "deep checking". The performance gained is the preventing of calling render on a component which will trigger updates on all children (which will go through this same cycle and call all relevant lifecycle hooks). I would note, calling "render" is done before any "virtual dom" diffing. That is still done after the entire tree is rendered to determine what should actually be changed in the browser.

[@benbaldivia9203]

In reviewing the video again I will state specifically what you were saying that is doesn't seem to be correct: kzbin.info/www/bejne/eJ_Gfnlolrl_Ztkm51s 1. "If you're wondering about a PureComponent vs. a normal Component... well a PureComponent doesn't do deep checking..." - Neither PureComponent nor the base class Component do "deep checking" so this is most definitely not a difference 2. "when a Component gets new props into it, it usually rerenders" - The base Component class doesn't do anything to prevent calling render once an update cycle has started. Unless the user (dev) implemented "shouldComponentUpdate" and returned "true" it will call render regardless of there being any new/old/no props. 3. Then you continue explaining "deep checking" as if it were happening somewhere in the implementation when it (as previously I mentioned) does not. Component does nothing. PureComponent implements "shouldComponentUpdate" using a shallowEqual of props and state. That is not what you stated. More importantly, I think it is important to state "shouldComponentUpdate" is not implemented in the base Component class and that it is in PureComponent. Also, I know this probably seems like excessive complaining. I do appreciate the videos you have created. I think in general they are pretty high quality material. ^^

[@vonoom]

Note to self: 12:30

[@willy-mp5bm]

inline conditionals (&&) -> greatly dislike. Much prefer a {checkRenderAbcd()} and then do the conditional in a function higher up. Much cleaner and more importantly, there's no 'what does it mean?' aspect, when Jr/New react devs are looking at it.

[@syntaxfm]

I totally disagree. {somefunc()} pulls you out of the context of the component tree. Teaching what && does is not a huge burden and can be done in minutes while saving a ton of unneeded code.

[@xaapt]

that was helpful

[@bramskiebiet]

Nice😀

[@FajnyAleZaNiski]

+1, Hi Scott :-)

[@nlgachu7536]

TypeScript in 2020 please

[@nikeshsraj]

Haven’t watched the video yet. But how relevant is this in 2020??

[@zoommair]

Why did you update bruh? lol

[@etayluz]

what's with the glasses?

[@syntaxfm]

I wear them to see.

[@sagar-gavhane]

Html to Jsx convertor and snippets

[@ImTheBatchMan]

Clicked because I got you confused with iDubbbz

[@chanlito4896]

Join us cool kids use standardjs

[@matiaslauriti]

Just 1 tip to get better at react: use vue

[@edvinsantonovs]

"Set propTypes & defaultProps" can be replaced with Flow. Everyone who use React should use Flow.

[@syntaxfm]

I don't know if I'd say "everyone" should use Flow. I think type checking yes. But I don't think there is a clear winner yet between TypeScript, Flow, Reasonml, ect. Flow is great, but I don't think it's a requirement specifically.

[@roach_iam]

You should also know that propTypes show errors at runtime as well which flow does not. Why not just use both?!

[@ralexand56]

No, everyone should use typescript. It supports features that usually end up being part of standard javascript. ;)

[@EddyVinck]

Everyone should do whatever they want to do.