The Most Important Design Pattern in React

VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"

In this video I will show you the most important design pattern in React. This design pattern doesn't have a name, because it's made up of multiple smaller design patterns in React. This is the way to architect an entire React application, with components, hooks, functions, and re-usable pieces of code. If there is anything that you get from any of my videos, this design pattern should be it!

[doruktekel]

summary : use custom hooks, use components for seperate all things, use inline func for basic things

[julien.roques]

Did I just click on a thumbnail that mentions "Senior" design patterns only to watch a 34 minutes long video that explains we shouldn't write the whole app code in App.tsx? Oh, my...

[bam]

OP, great job! One thing I noticed that is worth mentioning: you wrapped the functions in the useCount hook into useCallback to avoid unexpected rerenders in case the functions are dependencies of hooks. However, you have forgotten to add dependencies to the dependency arrays of the useCallback, which leads to incorrect values being passed when calling these functions more than once. This is a very common mistake among both juniors and seniors. You will want to either add dependencies or just use the updater callback function, e.g. setCount(prevValue => prevValue -1);

[innerstorm]

I was so waiting for the actual design pattern, that i've watched this whole 30min lesson on proper refactoring. thanks.

[SaraanAsim]

Almost 5 years experience and I still learned something new ! Learning truly never stops.

That bit about passing reference instead of calling function while initializing a state was new for me. Thanks!

[nikitaliakhovka]

hey Darius, just a small tip for you, you can use Ctrl + Shift + P and type `organize imports` to quickly clean up unused modules ;)

[tzaru]

Hmm, an important point to consider: he's focusing on abstraction. Over-abstracting or refactoring too early can backfire. When you aim for overly sophisticated systems, you often build features you won't need. Plus, you’ll never move forward if your mindset is: 'I need to write perfect code from the start.' The goal should be simplicity—make it work first, and as the project evolves and requirements become clearer, then refactor.

[ebn]

This is really good stuff you need to know about how React works under the hood. Good Job!

[lumiere]

On your own projects then it makes sense to remove features that do not make sense but if you are at work and you start removing pieces of code that seem weird to you, then you will have a very angry Product Owner lmao. Behind every strange design decision in a code base is a developer who probably implemented it against his will after hours of meetings

[cnmykze]

As someone just starting to learn React, this is extremely useful. Thanks

[atefevan]

Your coding style really pushing my react journey to another level ! Wish you to long live <3

[rjwhite]

You've helped me shrink components from 100's of lines long to just under 50.

[bakedbash]

Coding in react after 1.5years, your videos are very helpful in my journey 😀

[amirheidari]

Bro you change my view point . Omg . Actually your coding style will change my react projects coding

[JackTheZuluman]

Thanks for your content, man. You've officially become one of my top five go-to channels for help on YouTube.💯💯💯

[TheGrizzlyKnight]

Absolutely PHENOMENAL video. Thank you for your effort and clear explanations!

[petarkolev]

Cool video! I absolutely agree on these patters BUT in this example we had a huge chunk of component. Now imagine if you have to follow everywhere - no matter how small a component is you will end up with huge amount of files because you need to follow this rule of separation of concerns which is a really nice rule but one should add a logical condition when to separate and when to write in one place :)

[aneurysmjs]

I've been watching your videos long ago but now you already convinced me to subscribe. Great job.

[Yarde]

Wow! Awesome video.
I feel like this might be a good interview assignment when recruiting frontend devs.. give them the code and see how they approach improving it.

[daydreamer]

Refactoring sequence is important to be efficient. Divide into smaller components first, then create custom hooks when similar logic appears multiple times or to reduce clutter by grouping chunks of logic outside the component. That has been my rule of thumb for organizing React codebases.