3 React Mistakes, 1 App Killer

👉 VS Code theme and font? Night Wolf [black] and JETBrains Mono

0:00 Introduction
0:24 Mistake 1: Invoking Component Functions Directly
3:25 Let's Make It Blow Up
5:17 Fixing The Mistake
6:08 How JSX is Compiled?
7:27 So What Is CreateElement?
8:50 Mistake 2: Component Within Components
11:47 Mistake 3 : Locally Invoked Component Functions
13:34 Outroduction

#reactjs

[BAM]

I have definitely seen all 3 of these mistakes at my old job, no body seemed to know it's wrong when I told them they treated me like I was wrong so thank you for this video now I can share it with them.

[samuelgunter]

so far this is by far your best video of the year

[luizpaulonascimento]

This is an awesome video. I've worked in a codebase with a bunch of this "Component()" instead of "<Component />". I've always avoided to do it and thought it was a bit off, but never knew why, so I've never changed it nor talked to the person who wrote it. Now I have the technical base to do it. Thanks

[dev__adi]

another issue with nested components is that the inner component lose its state when outer component re-renders because each time it's a new reference so React treats it as a new component. So it unmounts old instance and mounts the new instance.

[hardikganatra]

Your videos are pure gold Jack Herrington Sir, please keep going. If possible just write a book on React and Typescipt.
You are the kind of teacher whole react community needs. simple and straight to point without jargons and over
bombardment of information.

Thank's onnce again !!! may god bless you

[ChillAutos]

These videos are so good. Not clickbait. Legitimate issues we all see all the time / have made ourselves. Great in depth concise explanations, with real world examples not some contrived scenario that never happens. Amazing as always.

[tririfandani]

I can relate to mistake #1 and #2, but I never thought about #3.

[yamelamadorfernandez]

Yes! I not only made those mistakes during my React learning curve but also now that I am a bit mature my eyes have opened and I am able to identify those mistakes during code reviews. I love your videos Mr. Herrington, very educational content.

[mikoajmarchewa]

I've met a lot of YT videos like that, but none of them contained a valuable advice for React devs. This one is different from the others. Thank You!

[beepdotboop]

I've seen some of these mistakes in some codebases I've worked on. Git blame showed that it typically is a backend engineer dabbling in the FE and bringing along patterns they are used to. Great video and happy new year!

[francis_n]

I literally got the "Rendered more hooks than previous render" for the first time ever at work today doing something slightly different. Took me some googling to figure it out. I was rendering a component by invoking it as a function and any presence of a useState hook within the component spawned the error and took down my app. Jack made this video today because he was reading my mind, haha. I also for the life of me cannot work out why anyone would do mistake 3. I'd really love to know where they learned that from. Great video Jack, very timely!

[juandsoto]

There are some mistakes that we know should be avoided no matter what but we don't really know why. This kind of videos with your gorgeous explanation let us go deeper and understand those mistakes.

You're the G.O.A.T Jack!

[sljivovizam]

Just watched your video on Brad's channel.

You are the best example of "doing something so profesionally that you won't need marketing". I was astonished by your level of knowledge and the way you laid everything out for the viewers. As a medior react dev i still cannot believe i haven't found your channel earler.

Keep making quality content which is unfortunately very rare nowadays.

[AutisticThinker]

13:25 - I've only used this with React Navigation. You can use it to add or modify props to the child component conditionally. Usually props passed are from React Navigation screen, because they instance components by string name as a prop "component='SomeComponent'"
instationation...
<MainStack.Screen name='ChangePassword'>
{(props) => {
return (
<ModalWrapper
navigation={props.navigation}
title='Change Password'
containerStyle={{
backgroundColor: colors.altBackgroundColor,
}}
>
<ChangePassword {...props} />
</ModalWrapper>
);
}}
</MainStack.Screen>
In this case the wrapper needs navigation, before rendering the child.

[dylanthony]

You deserve a sub after this video. It’s explained so well and isn’t over explained. It’s the perfect medium.

[giovannitonussi]

Amazing content as always. Ive made #1 and now not only I know it is wrong but most important I know WHY it is wrong, which is what I love about this channel. Thanks my friend.

[Filipmalek]

You're the best, Jack!

In terms of defining components within other component's module and/or function body - I saw it quite a few times but never got onto doing the same myself. Like you said, it bloats the component, makes it less performant (unless we use useCallback) and we're unable to reuse it/test it. I always stick to having these tiny functions as their own files even. I guess I started doing it way back in the beginning as it helped me understand React better.

[jasonfavrod]

Thank you for making this video. It's one of those things in React development that I'm always finding myself un-teaching people. Now, I can just point them to this video!

[javierpepe]

Great content, my key takeaway most of the time is the tool kits you use, arc is fantastic same as the libraries and overall stack

[rmartinc]

I see this first issue so often (even in react docs examples) and it I really appreciate you calling it out!