10 React Antipatterns to Avoid - Code This, Not That!

React is a minimal on the surface, but it’s actually a highly complex JavaScript UI library with many potential pitfalls. In this tutorial, we look at 10 antipatterns in React, along with tips and tricks to improve our code. fireship.io/courses/react
#react #js #CodeThisNotThat
🔥 Use this discount code to get 33% off Fireship PRO:
hh7F4Ezs
fireship.io/pro
🔗 Resources
React Docs reactjs.org
Full React Course fireship.io/courses/react
React in 100 Seconds • React in 100 Seconds
📚 Chapters
00:00 React Antipatterns
01:00 1. Big Components
01:55 2. Nesting Gotcha
02:35 3. Failure to Memoize
03:15 4. Useless Divs
03:44 5. Messy Files
04:40 6. Big Bundles
05:34 7. Prop Drilling
06:30 8. Prop Plowing
07:00 9. Try Some Curry
07:39 10. Code Smarter
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- React Pitfalls
- React Code Smell
- Problems with React.js
- React Best Practices
- Structure a react project
- Antipatterns in react to avoid
- React tips and tricks
- React interview tips

[@Mikenight120]

PLEASE MORE VIDEOS LIKE THIS!!! I love code reports and 100 seconds series but wish we got videos like this more often! Keep up the awesome job!!

[@hodabi]

Great video! When you work with react every day for a few years, you slowly realize exactly the things you showed here. It would've been nice to see this 2 years ago :)

[@amirhoseinhesami9336]

React's flexibility is its greatest strength, but if you don't know what you're doing, it can sometimes lead to weird things

[@shapelessed]

That's why more opinionated frameworks like Vue exist, so you don't have to learn every way you can do stuff. I myself would honestly stick to Svelte for personal projects, it's one of few frameworks that don't actively piss you off on each step. (And yes, React is a lib - as long as you don't slap JSX on top of it)

[@amirhoseinhesami9336]

@@shapelessed That's why other libs/frameworks like Vue, angular and svelte in the second, third and fourth place

[@lahcencodery]

@@amirhoseinhesami9336 react came first and that was huge advantage.. i would go with vueJS or svelte or even angular for complex Enterprise apps. The non opinionated react is not really my thing

[@amirhoseinhesami9336]

​@@lahcencodery vue and svelte in the enterprise world is not a real thing and also the funniest joke ever however the "angular" used to dominate the enterprise world however it is not relevant today because react is dominating the enterprise as well

[@gagandeep609]

@@amirhoseinhesami9336 backed by Google and Facebook/meta 🤷🏻 Any other reason which is better!?

[@Heisenberg-xc8ub]

I've been doing some stuff you said here without knowing it myself, I'm a self learner and have been following you for code quality improvements. You have once again upped my bar, thank you very much 🙏

[@kay_dev]

Very important thing with context - any item that consumes that context (i.e., the `const count = useContext(CountContext);` in the example) will ALWAYS rerender when the context value changes, regardless of if that component actually uses that value or not. A very common pitfall is to use Context as a sort of 'big store', where you've got a ton of values in the context that are consumed by components that only need one or two of said values. This means that every time the context component updates, EVERY SINGLE CHILD COMPONENT THAT RELIES ON THAT CONTEXT WILL ALSO RERENDER. It's a huge, huge performance issue in very large apps. Keep context to items that will change extremely rarely - themes, authentication states, etc - and never use them for data that changes somewhat frequently unless you're making a very tiny app that won't see the exponential performance loss of this. If you need something passed down but don't want to go through the whole heavy mess of Redux / MobX / etc, minimalist state management libraries like Recoil, Zustand, and Jotai are very easy, approachable, and lightweight ways to do this the 'right' way.

[@feritperliare2890]

But why even have this problem in the first place why is sharing info in react so awful in every way possible

[@xbutterguy4x]

using useMemo to prevent re-renders is a much more minimal approach as you don't need to install any dependencies

[@akremgomri9085]

great notice thank you

[@adeleke5140]

@@feritperliare2890 do you mean why react re-renders? if so, it is a way of keeping application UI updated as the state changes.

[@feritperliare2890]

@@adeleke5140 yes that’s how react does it meanwhile other frameworks only re render what needs to be re rendered when you call the info somewhere and not every spot that your store somehow reaches its a stupid expensive way to make sure your UI is updated

[@Sakiifyable]

This is by far the most efficient way to learn code and environment optimization I've seen. Every language needs a video like this, amazing work!

[@thevamsi]

I was just going through your react videos as I have a big interview coming up tomorrow. This is the best addition to my revision. Thanks a lot! You work in mysterious ways

[@valtism]

I think that when you have prop drilling issues, before reaching for context or redux, it's usually best to consider if you are using the `children` prop effectively. A lot of the time if you aren't using the drilled prop in the intermediate components, they can render `{children}` and that prop can be passed directly from the origin parent to the component that needs it.

[@trudyandgeorge]

Thank you. This is great.

[@yevhenkozlov286]

And it always more flexible. For free.

[@Bobobratwurscht]

Sorry I don't understand this. Can you explain it a bit different?

[@Dekatelon]

@@Bobobratwurscht You have a parent component and a child component. The parent component accepts a bunch of props which are just used to pass (or drill) it to the child component. What you can do instead is to just accept a children prop in the parent component and render it. When you now render the parent component, you pass the child component as the children prop of the parent.

[@nikilragav]

@@Dekatelon I'm still not following.

[@DANJUMA9]

Your videos are amazing man. Whenever I need a quick refresher you're the go to! Really appreciate all your hard work.

[@wizkid22]

In number 9 while technically correct there is a pretty decent size caveat. React 16 and 17 will batch setStates as long as it not in an async function. If you are in an async function you can use unstable_batchedUpdates to batch setStates. The latter being pretty hacky in my mind, but can save you from a large refactor

[@jakeysnaketube]

This is such a good video. When you're new to React, it's flexibility and minimalism makes it unclear how you *should* be doing things, the only thing that is exposed obviously is how you *can* do things.

[@user-ol6tq5hw7s]

Man you are a genius. Your channel and then 10 places are empty and then everyone else, it's amazing how original you are with content and just keep going! Big greetings from Serbia! :)

[@chatmeup8917]

☝️☝️☝️Thanks for your feedback

[@darck5240]

i love that you're explanations have no ummm's or aaaaa's, making them bearable and even entertaining to watch. love the edits

[@mountainslopes]

Great video! It’s crazy to me though how many of these patterns are encouraged out of the box with something like SvelteKit. First principles approach with a clean slate has done the Svelte team wonders.

[@sighmanthethird]

Awesome, educational video! Really appreciate the effort (and also the humor) that went into this. Also, this is the first tutorial video I watch on default speed and not 1.5x 😅

[@dylanclarke9497]

This content was a gold mine. Started using React more in depth a few weeks ago to build a booking app, and I was just getting to the point of needing something like Suspense to conditionally render UI. Thanks!

[@BryndilleYT]

You don't REALLY need to use suspense to conditionnally render UI, it's not mandatory.

[@neard82]

9 months later and I can finally understand this video! First time I watched it, I had no idea what any of this was.

[@Ferdziosz]

The 100 seconds course sounds fantastic. Small chunks of knowledge delivered without any bullshit. I hate when I look for a solution or example, and the article 10x times the length it could be if it skipped the obvious parts, like setting up the project

[@gauthamnookala1776]

With great power comes great responsibility! Fantastic video, and I am definitely going to be using a few of these tips and tricks. Thank you.

[@kwangsamyew8469]

I am using Svelte exclusively, but the concepts here in React still apply when it comes to componentizing. Super useful advice, thanks!

[@ba8e]

Svelte saved my fucking life. React is garbage in comparison.

[@hanesmitter1469]

Another anti pattern is doing component updates on unmounted component resulting to memory leaks. Majorly caused by asynchronous Javascript

[@chatmeup8917]

☝️☝️☝️Thanks for your feedback

[@rhebucks_zh]

@@chatmeup8917 not actual firebase

[@heheboi812]

Many people forget to use useeffect's cleanup function!

[@FunctionGermany]

when fetching data, the AbortController (native API) can be used, or a library that abstracts this away or avoids this issue can be used, like react-query

[@prismqubic]

calling an async function without setting the state would not lead to memory leaks right?

[@outis99]

I stopped naming my files index.js because of that, not sure if I will switch to what you showed, it's amazing how you talk about stuff nobody anywhere talks about Also that vs code extension, HOLYY what a lifesaver

[@binukads]

I was in a trouble in today with react, and you uploaded a video about it. thank you very much

[@d3-in-10-minutes-or-less]

A masterclass in both react and instructional videos. Thank you!

[@SonAyoD]

Great video! I need this course for my start up project im currently working on.

[@justingolden21]

This is an amazing vid. Use react for work and a lot of the problems and solutions you mentioned apply to my everyday life.

[@SirVib]

Great video. As a beginner, i learned a lot in these 9 minutes. Thanks! 🔥 🚀

[@codinginflow]

Just installed glean. Thanks for the tip!

[@MarthinusBosman]

I'd love to be able to vote financially for what content you focus on, because I'd love more of these code this not that videos

[@Pilosofia]

to the people who still use classes components: make sure to keep cleaning your caves, bad environment effect the productivity of the developer.

[@user-yy3ki9rl6i]

I just got accepted as a frontend dev on a startup company. A year ago, CEO hired some devs to create mobile app and web app using react native. Devs finished the contract and left. And this is where i get in. Imagine me, a react newbie, who have to fiddle with a messilly coded and stinky class based component react app. The worst part is, there's almost zero class based component tutorials on youtube. At least the pay is nice

[@EnriqueDominguezProfile]

@@user-yy3ki9rl6i I'd avise you to rely on the React docs, fortunately they have an excellent documentation (which is actually rare), and with plenty of class-based examples. And try sell your boss a progressive refactoring of your code.

[@archmad]

i remember when my team first work on React before it got hooks but 3 months later, hooks got introduced and people didn't want to jump ship. tried convincing others to move all to hooks, but too late. we end up half of the code in hooks

[@Pilosofia]

@@user-yy3ki9rl6i the majority of react developers stop using classes and try to avoid it. because functions give almost the same result and with more readable and clean code. classes still has some render cycle methods that are not exist in functions but you will not need them in 90% of the cases.

[@scottfowler]

@@user-yy3ki9rl6i I set aside an hour every workday to refactor one or two class components into hooks-based function components. A week of that taught me more about the codebase than the previous two months, and after two weeks my boss took me aside and asked me to refactor everything. Refactoring to hooks is such a win in performance and complexity that you should try to make it happen however you can, everyone around you will notice the improvements quickly

[@RazKoller]

Terrific video! Every point is... well, on point. 🙂 You have a new subscriber. 👍

[@phucnguyen0110]

Thank you, Jeff! This might save me as a newbie-ish React developer for damn sure!

[@hta218_]

Awesome explanation! Thank you so much for making this video!

[@theatypicaldeveloper]

never heard about glean. Tested it this morning, it really has potential to speed up my work. Thanks for sharing!

[@brianevans4]

If you curry a javascript function in es6, you dont' need the braces and return statement, you can double up on the arrow syntax: const handleIt = v => e => console.log(e, v) equivalent function to the one shown at 7:31

[@JoeAttardi]

True, but this also comes at a cost of readability

[@madhououinkyoma]

Talk about antipatterns

[@igorswies5913]

He uses TypeScript so if you want to define a type for the parameter you need to use parentheses

[@xrr-1]

Another useful feature "functional state update" if the new state depends on the previous state, you can pass a callback to setState like `setState(previousCount => previousCount + 1)` instead of `setState(count + 1)` Using functional state update will help in the memoization of the event handler using `useCallback` as the dependencies can be an empty array and it will also help in avoiding stale state closures

[@gagandeep609]

Always followed it to save myself from trouble

[@pt_trainer9244]

i use for handleinput functions

[@victorlongon]

Yeap..it is a known issue. Everytime you need the current state value always use the callback. You can even end up in weird bugs if you the state value gets stale (like in an interval)

[@wizkid22]

I remember seeing this in a PR and was very confused.... Now I use it all the time

[@TheMikhaylov]

setState(count++) ; )

[@BlurryBit]

Ok, glean was a blessing from this video. I did not know it existed lol. I used rfc and rnfc, but this is next level. Thanks man!

[@davidalexander8786]

Context is not only "cool" to prevent prop drilling, is very helpful to separate state logic for a bunch of components

[@thepriestofvaranasi]

There's an instructor named John Smilga and his 14 hour long react video on yt covered all of these tips and tricks along with so many other things for free. I am glad that people like you guys exist.

[@FelipeMaffezzolli]

Dude, I like your content so much that I feel like I owe you money every single video you post. Great work Jeff!

[@benwritescode]

In react everything depends on the developer’s knowledge, it can get to a complete mess or a solid structure. Great video 👍

[@Kwuasimoto]

Thanks again for the tutorials Jeff your style of teaching is very straight forward and to the point. I am curious if anyone has seen a similar extension for JetBrains (glean)

[@hofmeinmer]

I was trying to determine why your voice is so familiar. Then I realized I took a React Native course with you! Just wanted to let you know, it taught me enough that I ended up developing a full stack app using similar architecture!

[@jaymanx4life]

Two minutes in and there's a gem of a VSCode extension already. 👏🏽👏🏽👏🏽Can't miss!

[@nro337]

This is a super helpful video. Thank you for the great video!

[@ShiNijuuAKL]

I feel so good that I knew all of this and predicted all your solutions without even looking into the topic.

[@austinevans9467]

One of these for Angular would be amazing! Great video as always Jeff

[@invinciblemode]

Angular is dead (This comment was paid for by Ben Awad)

[@paulwhiterabbit]

@@invinciblemode AngularJS to be exact, killed by google since December last year

[@niklasstahl98]

Eh, that would probably confuse most Javascript viewers who've never heard of types lol

[@austinevans9467]

@@niklasstahl98 Not really. Most JS developers with a little bit of experience will be familiar with the fundamental types. It's only jarring for the first couple of days using them in a strict manner but after that it becomes natural.

[@heroe1486]

Thanks, knew most but nice reminder as we often forget things if not practiced lately

[@nemeziz_prime]

Your course is surely gonna be awesome 🔥💪🏻

[@FunctionGermany]

edit: apparently currying is still the correct term, i've just never ever seen it used for general function generation. regarding 9: in the example that _you show_ it's a curried function, but what _you describe_ is just a factory function. curried functions basically let you specify the multiple arguments of a function A in multiple steps where each step or function call returns you a function where that value is "stored" in the closure and you can specify the next argument with the next call on the returned function.

[@creatorsremose]

Which is better in terms of implementation though? Factory or Curried? Because they're technically the same...

[@FunctionGermany]

@@creatorsremose they're not. currying means the final function arguments get composed in this staged fashion. every curried function is a function factory, but function factories don't have to receive or provide any arguments up or down the chain. when working with react, you probably never need currying.

[@jameszhang1278]

When would you need currying?

[@FunctionGermany]

@@jameszhang1278 it's a functional programming pattern for when you have a target function with more than one argument. if you look up currying you should find good examples.

[@yonoseespanol]

He is correctly describing a curried function. Also, factory functions return objects, not functions (unless we're being strict with how we define a function in Javascript).

[@BaileySimrell]

Suuuper pumped for the new React course on Fireship Pro

[@hoaxygen]

Thank you, this confirms some of my hunches! Very informative

[@gustavoh5143]

i didnt know there were this many antipatterns in react, i will be using all of them now! nice video

[@REDnWHITEnGREY]

this was awesome. i love that last tip!

[@coolicz]

Thanks for the PRO discount! Just subscribed for life :)

[@aurielklasovsky1435]

I love these. Thanks!

[@phantasyphotography3813]

Not all heros wear capes, so much good nuggets in here. I use currying all the time but I didn't know about glean and now I know how to deal with the index.tsx index.tsx index.tsx issue in my vscode tab bar ☺

[@codeaperture]

Happy code this not that videos are back. Hey did Jeff switch away from angular and why??? I guess Nextjs motivated him or something?🤣

[@camschroedes]

So hype for the react course!

[@ChristianHelms]

Very helpful as always. As someone just getting back into coding after a break these help a ton. I'd love to see one over Tailwind CSS

[@daumienebi]

Why did you take a break if I may ask?, Was it due to a burnout or something like that?, I'm just curious so you don't have to answer if you don't feel like doing so :).

[@ChristianHelms]

@@daumienebi I started a marketing and business development company. So for the majority of my time doing other things. I still built websites and coded it was just in WordPress more than anything so mostly code snippets and changing things in a theme. Recently, my company has grown to the point where I can spend some time doing new things and I picked up design and software development a lot more!

[@daumienebi]

@@ChristianHelms ohhh okay, congratulations on your Company!!

[@ChristianHelms]

@@daumienebi Thank you very much! It's been a blast

[@nakuldhingra3682]

Many people are asking about vscode settings. According to me : Font : Fira Code Theme : One Dark Pro

[@sounak2009]

Never heard of Glean before. Thanks a lot for sharing

[@ryanfleming1996]

I really enjoyed this. Good job 👍🏻

[@gatocode316]

Points 5 and 9 really help me, thanks!

[@lookwhoneedsahobbie]

Even before this video I thought my event handlers were ugly. Now I'm going to rewrite them as curried functions. Thank you so much!

[@vinnicf]

I'm writing my first react app and prop drilling is the first thing I've noticed as not very elegant with my code. Now I can name it and think about solutions.

[@rohitbhujbal7333]

That's a great video!! Any thoughts on Recoil for state management instead of using Redux?

[@mentoriii3475]

5. That only works if you style your components with plain css, however most modern react applications are done with a framework or Sass, in that case i suggest splitting components with use case and create a index.js in the folder and export all components from that folder

[@chatmeup8917]

☝️☝️☝️Thanks for your feedback

[@albertnahas4619]

Very helpful video, amazing content as usual

[@detaaditya6237]

React's flexibility comes with great responsibility. I once worked on a React project where everything is memoized. We thought it would improve performance, but lately I realized it was a premature optimization

[@dealloc]

Definitely a problem I see often. Using memo/useMemo/useCallback is a tradeoff between spending processing time and memory. JavaScript engines are really fast nowadays, and React isn't slow either. For most UI you won't notice any performance issues unless you do something really complicated; at which point you have a few options; If your component does something that results changes the DOM or needs to do offload rendering where it doesn't matter whether React can keep track of it, you can use imperative APIs; e.g. for animations. You can use refs to grab the context of underlying DOM nodes of React elements you want to access. In most cases, splitting out components into logical parts that can do their own work, such as subscribing to specific state or doing computationally expensive things that aren't easy to optimize otherwise, you can memoize it, optionally with a comparison function. The less props you pass those expensive components the easier it becomes to manage at the cost of less reusability-again a compromise you'll have to make.

[@metenrog]

Hey! I just learned about antipatterns in my softwares engineering class today. What a coincidence 😮

[@adelineiscoding]

Thank you soooo much for glean, didn't know it !! :)

[@MartinOckovsky]

I love you. This was amazing. Please do other technologies in the same way. Angular, rxjs, firebase? :P

[@amittraspal]

Just amazing, like always, I am going to bookmark this video until I've used most of these points 😅😅

[@carshoesch]

Really helpful video, thanks a lot!

[@michaelhinojosa9665]

the curried function for event handlers is my new favorite piece of code.

[@everenjohn]

Very helpful, thank you!

[@nodirbekvositov]

Thanks for the extension Glean. Saves my life

[@FunctionGermany]

for the context API i like to use this pattern where i have a single file that - creates the context with the default value undefined, but does not export it - creates and exports a provider component - creates and exports a custom hook that uses useContext and throws if the context value is undefined this way you always only import one thing (useMyContext hook) and you'll also always immediately know if you're using a component and there's no provider in it's parent hierarchy.

[@shawnc7381]

Interesting….where can I learn this method?

[@codeaperture]

@@shawnc7381 on your own 🤣. Just understand the context API and custom hook deeply 💯

[@FunctionGermany]

@@shawnc7381 it's really nothing more than i described in the comment :D

[@AdamKent755]

@@shawnc7381 I can't post a link here, but google "kent c dodds how to use react context effectively" there's a post on his blog that covers this pattern.

[@ethanneff9817]

Some of these are anti-patterns as well. Spreading props is an anti-pattern because it is not declarative and it can cause unneeded exporting of types between components. Additionally, your curried function should be nested within a useCallback() to prevent extra re-renders. If you want to teach against anti-patterns, it would be better if you taught your audience eslint recommended settings for common plugins.

[@_guru]

What are those eslint recommend settings?

[@Ly-zt8ij]

I agree with the second half but not so much as the first. Spreading is a fine pattern if you as the developer are aware of what you are doing. Not to mention typescript ensures you use it properly

[@EnriqueDominguezProfile]

@@_guru ESLint has a bunch of default rules, but if you really wanna give it a go, try the Airbnb rules. Those are opinionated, and I enjoy them very much.

[@dima6488]

Spreading props isn't an anti-pattern, there's a major difference between personal code style and actual anti-patterns

[@Will4_U]

Callstack's eslint-config package is really nice to use. Not a big fan of AirBnb rules though.

[@shadmerhi]

I love 4:30!! Have been struggling with multiple index.tsx files for a while now 😂

[@Masus04]

Great Vid! Could you do something similar for Flutter? I reckon much of what you mentioned still applies.

[@ncookiez]

This video just made me very happy that I work with Svelte...

[@ba8e]

It is inevitable. React will die eventually. Long live Svelte!

[@yevhenkozlov286]

It's funny enough you are happy with Svelte but watching video about React patterns :D

[@ba8e]

@@yevhenkozlov286 It's like watching videos of life in Africa, that make you appreciate what you have.

[@lexsemenenko7044]

The code in the end. Thank you. I'm in

[@hugot8226]

Another good way to manage state is with the react-tracked library, it offers the flexibility of the context api, the advanced usage of reducers like redux, but the main goal is to avoid rerender of components when it's not needed. Check this library, it's a good one in my opinion 👍

[@niklasstahl98]

The JS solution for everything: just install another library and hope it still works when you deploy :D

[@herrnamenlos1238]

Great video! What about a video about SCRUM? I think SCRUM in 100 seconds would be quite interesting

[@nilkanthparmar1376]

Hey. One cool thing is you can also return multiple components in array, like return ([,]) instead of wrapping them in React.fragment

[@laurenz1337_]

Interesting, I think the ... Syntax is way nicer to read though.

[@mehrandvm7343]

Amazing video. Top notch tips

[@santiagosuarez8479]

Bring it bruh!! I want that course

[@sanyo_neezy]

can you do a video on *akka actors and akka http*, please? I'd specifically like to know about it's use with Scala, because they seem to synergize really nicely. I don't know if backend stuff might be a bit out of your comfort zone, because I am no regular viewer and I think I have seen more frontend / general programming wisdom and wit in your videos. However, I'd love to hear what you have to say about it and I'm sure you are going to drop some decent knowledge!

[@TheGodSaw]

I really really like your style. Did you ever make public your "youtube stack" would be very interested. I want to do similar videos for the Data / Backend side.

[@eikeimnetz]

Please do this Antipatterns video for Flutter, that would be very useful! Nice Video, i love them

[@incubated]

curried functions won't prevent rerenders because when you call the function it returns a new function, so the reference is new each time. useCallback won't help here either, but if you set up your callbacks to target child component's return signature, then you can simply use useCallback

[@fredgotpub871]

I just know a bit about Flutter and it was extremely interesting !

[@RovelStars]

Thanks! Was learning react today and this was like, not even let me choose the wrong path from start!

[@mentoriii3475]

you don't get better at something without sucking at it first

[@RovelStars]

@@mentoriii3475 ikr, still this is a good starting point

[@chatmeup8917]

☝️☝️☝️Thanks for your feedback

[@RovelStars]

@@chatmeup8917 shut up impersonator

[@samerallahham2182]

07:31 to my knowledge, the call of a function with params without the arrow function syntax causes it to run immediately regardless of the event firing, doesn't it?

[@mostafizurrahman2694]

Holy moly! I felt most of what you said. I must be on the right track then. F***in' tutorial purgatory.

[@apuravela]

Really helpfull video, thanks!

[@julianstorm7722]

Zustand in 100 seconds please. As always , great video. Thanks for your time.

[@paulwhiterabbit]

Have you done rxjs before? I think it's great to learn it since it has changed how I think and solve problems related to data handling. It feels like shaping a river with your own hands like a god.