Design patterns in React

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

In this video I will show you a couple of senior React developer design patterns in React. These are great patterns to use to build scalable React applications and will help you write better React code, and will teach you how to create components that are clear to understand and work with, and that allow you to add as much complexity as you want to your React application!

[apiro]

A series in design pattern would be great

[DevMeloy]

It's always interesting to see where someone draws the line on single responsibility.

[oldyoung]

I love your way of explaining things. Understandable and calm language, as well as not overloaded code, which is really nice to read.

[nicholasroman]

I am grateful for your tutorials. Especially the React Query tutorials.

[giovannitonussi]

I have done all of those things before, glad to hear that they are good practices 😅

[colbatronbmw]

Don't you hate when you know that there is a better way to do something, but you don't know the right terms to search for? I needed a compound component on a recent project but ended up coding my way around it. Thanks for these videos, when developers can talk to humans it's their responsibility to help. I was a tutor for a few years. I bet making these videos has helped you develop even better.

[cosminraducoman]

Thank you so much for the time you invest in the making of these videos. Best React content available.

[guitarcrax]

Love your videos man. Find them very helpful. I’m an experienced backend developer, finally biting the bullet and reaching myself react (if that’s at all helpful info).

Making my way through every videos you’ve made lol

[arihantbedagkar]

The last design pattern greatly helped me structure my code better. Thanks for the video. Appreciate if you can add some more design patterns.

[justin_t]

really like the custom hook tip at the end!

[Solo_playz]

Congratulations 🎉 👏🏼 for your first 🥇 sponsership 🤝

and as always infotainment video ❤

[elmflyz]

Thanks for such quality videos. A series on design pattern would be appreciated.

[salmanansari]

this channel should be included in the "hall of fame" you are the only one teaching real world react.

[avinashgodvin]

Wow, Great explanation !
Thank you : )

[serpercody]

Thank you for the great insight, this video came out exactly when i needed it. Would be great if you could make a in depth video about design patterns in react and best practices for maintaining and scaling bigger projects.

[Rustaveli_]

Hi, Don't you think that HomePage violates the Single responsibilities principle? Because the HomePage component fetches posts, in the future it may be responsible for sorting posts, etc. + it renders content in the future HomePage also can render something else, which may also require fetching data. Isn’t it better to move the state and fetch to the PostFeed component and fetch the posts there? In this case PostFeed will be responsible for posts logic. If we want PostFeed to be reusable, we can rename this component to just Posts (will accept posts as props) and create a wrapper e.g HomePagePosts which will have a posts state and fetch the data and pass this data to the Posts component through the props? What do you think?

[gmjitendra]

Excellent. thanks for sharing design pattern in react.

[regilearn]

yes, with REACT if you can do a design patterns series practical real-world example would be really great

[AhmedMohamed-tfed]

@Cosden Solutions - 2:10 You are not supposed to use side effects directly like this in React components. You should make a custom hooks / utility functions to adhere dependency inversion principle and separation of concerns principle...

[harrybilney]

The only thing I would say about having your fetching and state in your parent component is that when you update that data, your whole page will reload, not just the componants using the data.