Refactoring a React component

Refactoring a React component - Design Patterns

Рет қаралды 87,495

Күн бұрын

Join The Discord! → discord.cosdensolutions.io
VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"
In this video I will show you a couple of great 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 refactor components in a way that is clear to understand and work with, and that allow you to add as much complexity as you want to your React application!

Пікірлер: 127

@kennardsugirotok7374 5 ай бұрын

Please do more of these refactoring. Really helps especially for beginners like me

@fellypsantos_ 5 ай бұрын

I've learned more in 15 min them that in 1 year

@user-vk8tw4xw3r 2 ай бұрын

Your videos are truly remarkable! I've been on the hunt for quality content like yours for months and finally stumbled upon the right place. My gratitude for your excellent videos

@NaDennIsGut 5 ай бұрын

i love your style. just straight to the point and fast delivery of information. please do more refactorings :) subscribed

@cosdensolutions 5 ай бұрын

will do!

@bleakCode 5 ай бұрын

I really find your videos enjoyable to watch and knowledageable. Keep going!

@chrismixlist 5 ай бұрын

your videos provide information with great value 👌

@ry902 4 ай бұрын

Need more of this . Really helps when you knows the react framwork but don't know how to apply them in actual practical scenarios .

@joaomarcelofurtadoromero8277 5 ай бұрын

Gold content, would love to see more refactoring

@a7mdbest15 5 ай бұрын

Loved the video, refactoring is actually what we need to learn

@sondernfy 5 ай бұрын

Love this! Would be nice if you also included the equivalent (or closest approximation) to these in JavaScript as well so we could have a direct comparison. Awesome video

4 ай бұрын

I really like your approach "hooking" the logic when needed. One little thing I would add is using constants in a separated file of same name, for example: const CACHE_INTERVAL = 100 * 60 * 60 const PAGE_VIEW_ANALYTICS_ID = "page_view" And reuse them and even if someday you need to rename / change values, you do it in only one place: 🙂 ... GcTime: CACHE_INTERVAL, staleTime: STALE_INTERVAL ... trackEvent(PAGE_VIEW_ANALYTICS_ID, ...

@excelnutcracker4312 4 ай бұрын

I'm new to react and TIL, a whole component re-render when a piece of state change. I never knew why would you want to put the modal open state inside and think like 'I can prevent all of this component to render'. Great and clear explanation!

@belkocik 5 ай бұрын

I love these kinds of videos that you explain Design Patterns in React :) Woud love some stuff from React Native too if you can.

@HerlonCosta 5 ай бұрын

Amazing explanation, thank you so much!

@nickwoodward819 5 ай бұрын

Only a third through it, but this video is fire. Please do more of these!

@jaortiiss 5 ай бұрын

This could be a real scenario of a PR session. A senior dev explaining concepts to a junior one in a real life project. Pure GOLD.

@Rick-pz1ju 4 ай бұрын

awesome video man! I will share it with my co-workers

@cruzlee4092 5 ай бұрын

Great! Thank you for sharing. It's useful for me.

@saqibmuhammad7218 5 ай бұрын

Hats off Bro Really learning lot of new Stuff🥰🥰😍😍

@cristhianjhlcom 5 ай бұрын

Hello, do you have any video explaining how to organize project folder for big projects? 💪🏽

@prashlovessamosa 5 ай бұрын

He already created a video.

@fdk.5390 5 ай бұрын

@@prashlovessamosa That's what he asked.

@nickwoodward819 5 ай бұрын

Take a look at examples from state management packages like rtk query, they tend to give decent structures

@jech33 5 ай бұрын

Hey man I really like your content! I don't know if other people are having the same problem but I think you should turn up the volume on your voice. Somehow when I came from other videos I find myself having to turn up the volume through either my pc or the youtube vid. Keep up the great content! your quality is awesome

@cosdensolutions 5 ай бұрын

interesting, you're the first to have mentioned this. I'm soon getting a whole new setup so this should become much better

@jech33 5 ай бұрын

@@cosdensolutions awesome

@daveboo7002 4 ай бұрын

It sounds like your mic is on your keyboard?

@coder_one 4 ай бұрын

I am a bit concerned about writing custom hook with useEffect (last part of video). The IDE can catch quite well if we omit some variables from the useEffect dependency array. By pulling this out into a self-written hook, we completely get rid of support for catching potential errors/missing variables in the dependency array. This can lead to " Reacts one million dollar mistake "...

@andrewbarnes102 4 ай бұрын

That’s a great point actually. Wonder if there’s any way around it.

@irfansaeedkhan7242 5 ай бұрын

where were you all this time, i was searching for this practical videos for a long time, thank you so much

@cosdensolutions 5 ай бұрын

well, I'm here now ☺️

@gmjitendra 5 ай бұрын

great video, thanks. would appreciate if you also include testing along.

@MrKarl992 4 ай бұрын

Thank you. This content is amazing. Do you have some video explaining the file architecture you use? I mean, which folders would you create for this example if it was a real and scalable project?

@cosdensolutions 4 ай бұрын

I have a video on folder structures that goes over this!

@quanganhinh6252 5 ай бұрын

Really good video, please do more

@Gringo0517 5 ай бұрын

Thanks for the content! I noticed you wrapped the new component in a div when I was expecting an empty tag or fragment. As these aren't exactly equivalent in regards to styles coming from a parent (flex-direction for example), I was curious if this was intentional?

@cosdensolutions 5 ай бұрын

yeah, I added a div there but you could've not added it. I was focused more on the concept and may have added it by habit :D but definitely only add it if you need it!

@Gringo0517 5 ай бұрын

@@cosdensolutions thanks for the clarification! Again, thanks for all the great content. In particular the short-form stuff has been great at funneling me back to your longer form information. Liked and subsribed

@user-tz4du2oh1x 4 ай бұрын

Using null instead of undefined for explicitly set properties can be a good practice to make the code more explicit and reduce ambiguity.

@mustang9951 5 ай бұрын

quality content

@ilmanmanarulqori5632 5 ай бұрын

lets goooo!! 🎉

@codexpath2960 3 ай бұрын

awesome review

@exequielmleziva4599 5 ай бұрын

its a great video, the only thing that i dont think i understood is the deps prop for useEffect... I have a feeling that's going to cause problems in the future, but otherwise, which other options do we have?

@cosdensolutions 5 ай бұрын

That's fair, you could just create a wrapper around the analytics function that's properly typed and use that instead without a custom hook. Might be a better option actually

@aminda6862 5 ай бұрын

great thanks a lot

@malekimam1444 5 ай бұрын

Thank you for the video, I have a question regarding organizing this code block: { products && products.length ? ( ) : ( 'No products available. ' ) } Can we move this logic of checking if there are products inside the component?

@cosdensolutions 5 ай бұрын

yeah you totally can!

@Kaltste1n 5 ай бұрын

What extensions do you use? Especially those onclick import Thanks!

@conallen3166 3 ай бұрын

Hey Cosden, great tutorials, can you tell me how I can create components using rjsfcp? is there a extension needed to support that? ive tried with copilot without luck. Thanks and keep up the good work : -)

@uome2k7 5 ай бұрын

Isnt the track page hook approach the facade design pattern?

@thanirmalai 5 ай бұрын

Amazing videos

@marcelp4825 4 ай бұрын

Hello ! Why did you choose interface instead type? Great video!

@cosdensolutions 4 ай бұрын

No reason, I just use both interchangeably

@juozasmas 5 ай бұрын

Is there any way to automate auto file creation from seelction of jsx? Also for hooks also

@LinhNguyen-gx5fb 3 ай бұрын

nội dung này tuyệt quá hay anh ơi !

@benyamin4634 5 ай бұрын

thanks

@AndreyBelfu 5 ай бұрын

what vs command do you use for importing files?

@cosdensolutions 5 ай бұрын

Just normal imports from vscode

@lyrical6852 5 ай бұрын

Yeah, how to do that import? Whats the shortcut in keyboard?

@mohamedhakem7355 3 ай бұрын

@@lyrical6852 Ctrl + space on PC

@rjwhite4424 3 ай бұрын

What is the vs code extension you use for that ts snippet

@tomassinkevicius6786 5 ай бұрын

Ideally you only want to send track event when you have a user, but this hook you created will send them even if you don't have one yet.

@cosdensolutions 5 ай бұрын

Yeah but you'd just need to add an if check. In this example thr user was there already

@albiceleste101 4 ай бұрын

I loved the video! At 7:15 you keep calling the function a "custom hook", wouldn't it require react to be imported to be custom hook?

@onintuverachannel 5 ай бұрын

Please do more . how about color system of the codebase? like you dont need a help of css framework that can produce multiple themes in it.

@doniaelfouly4142 3 күн бұрын

Thanks

@mfion1 3 ай бұрын

Nice video

@tony-gx7rt 4 ай бұрын

can you do some videos on vue js 3 , the resources are scarce and especailly on compositon api.

@LogopedLTD 3 ай бұрын

But eslint react-hook plugin says about warn when put some array of deps from somewhere

@ZakTheCreator 4 ай бұрын

how do i get that 'rjsfc' command that you did?

@Gangbuster74 5 ай бұрын

Can you please make a video how to append search params or query params into api end point if they are coming from a select input or anything that manages them, currently I just use ternary operator to append them based on their value if it’s present, I dont think this is the best approach, If you could really help showing a practical approach How big projects and companies or experienced developers does that, that would a really great for community thank you

@HelenaDuGraus 5 ай бұрын

interface or type for components props?

@cosdensolutions 5 ай бұрын

I've switched over to types for everything now

@wakandagaming5763 5 ай бұрын

hi can u make playlist about react desain pattren? thanks

@ignacioarriagadairiarte4338 5 ай бұрын

what is your react code snippets extention?

@cosdensolutions 5 ай бұрын

check out the video I made on vscode

@user-cm2nz9ik4v 5 ай бұрын

Hello @cosden I have an issues can you tell me how to fix this react-dom.development.js:67 Warning: Encountered two children with the same key, `.$[object Object]`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted - the behavior is unsupported and could change in a future version. Note: I have given the key but stilll it shows Thanks in advance!

@aytacklnc6642 4 ай бұрын

3:55 How could you do rjsfcp command? It is not supported by default. There is no information on the internet.

@cosdensolutions 4 ай бұрын

check out my vscode setup video, it's a custom snippet

@teenspirit8714 3 ай бұрын

how about "array.length &&" checking? sometimes it's works wierd

@mahdiimad1447 5 ай бұрын

If you have an useEffect that has a dependency on a prop then you don't need an use|Effect you can only add a key prop to the component, and then it will re-render without using useEffect

@jgagnon88 4 ай бұрын

This is a bad advice. If the key changes, the component will unmount and then remount

@abhinavdhama3014 5 ай бұрын

Bro can we have one redux think middleware video also?

@genericbinary558 2 ай бұрын

Ohhh nice. So what if I make a typo in the custom hook file where I defined the interface. 😂😂

@joseortiz3806 5 ай бұрын

Pls, what is the theme name of the editor?

@cosdensolutions 5 ай бұрын

Vscode

@MohammedShibincp 5 ай бұрын

can you make video in react roadmap pls

@cosdensolutions 5 ай бұрын

yes, it's coming as soon as the new year starts!

@user-nl2ct8jn9k 5 ай бұрын

Your videos have always helped me and even though I'm in your Discord channel, I'd still like to ask if you can mentor a junior developer like me. I'd be waiting anxiously for your reply. Thanks

@cosdensolutions 5 ай бұрын

I currently don't do any personal mentoring, but I have these videos and the Discord that really helps! I'm also working on a course that will be extremely helpful as well

@user-nl2ct8jn9k 5 ай бұрын

@@cosdensolutions Thanks for your quick reply. I am a junior fullstack developer and I'm currently tasked at my current job to do a complete rewrite of the app. I'm completely overwhelmed and need guidance on how to build an enterprise and scalable react app. Could you offer me some help or recommendations? Thanks

@Shadel. 2 ай бұрын

Thanks for video but this video is pretty hard for beginners because this topic 2nd concept on react road map. So, Beginners don't know about hooks. I think you can make that basic like this div, h1,img elements. This topic 2nd concept on road map so "Components" but you mentioned that advanced level react informations. I think you should update to video for "How to split larger components into smaller ones (example 1, example 2)" so you can create that new video for beginners because component Layouts are very important in react development.

@Wakkyguy 5 ай бұрын

Deps [userId] passed to useTrackPageView being a reference type will be changed on every re-render thereby triggering the underlying useEffect of the custom hook again and again. Shouldn't we try to stabilise this reference?

@jamaliseven 5 ай бұрын

don't worry, he's a senior and definitely understands react. better to flood your analytics API via beautiful custom hook rather than just wrapping and typing your analytics method (and always enjoyable debugging experience to jump into 100 custom hooks to track down bricked useEffects inside)

@cosdensolutions 5 ай бұрын

Yeah, it would be better to do that actually! I didn't think about it while making the video. You could also create your own function that wraps the analytics one and not bother with extracting the useEffect. It's completely up to you!

@Wakkyguy 5 ай бұрын

@@cosdensolutions sure, thanks

@aleks6331 5 ай бұрын

No, as useEffect will check items INSIDE of the deps array for consistency, not the array itself. So this code is perfectly fine and won't retrigger unless `userId` changes.

@Wakkyguy 5 ай бұрын

@@aleks6331 Oh, is it? Will check it out sometime.

@xatrox2803 5 ай бұрын

What is the extension that you use for the snippet "rjsfcp"?

@cosdensolutions 5 ай бұрын

I made it myself, see my vscode setup vid

@kost32 5 ай бұрын

Thanks for video! What about to make UserProductsFilter component as children of UserProductsFilterButton? No props will be drilled, and reused UserProductsFilterButton component as Modal

@cosdensolutions 5 ай бұрын

Yeah that's actually better! Nice

@akhs001 4 ай бұрын

You need to show how the app works also, before and after refactoring . Not just the code

@Becherman 2 ай бұрын

I am not sure that putting the whole modal into button components is a good idea

@shmida1991 4 ай бұрын

Typescript - work hard to aviod "null of undefined" So much overhead

@stn1k3 3 ай бұрын

Good video, however, `useTrackPageView` should not be typed for specific pages, as it goes against separation in concerns, instead is to be agnostic of the page, so the proper solution would require using generics type PageEvent = { pageId: P; data: D; }; type UserProductsPageEvent = PageEvent; const useTrackPageView = (event: T, deps: DependencyList): void => { useEffect(() => { trackEvent('page_view', event); }, deps); }; // consumption useTrackPageView({ data: { userId }, pageId: 'user_products_page' }, [userId]); lastly correct type for dependency array is DependencyList // defined in react as ReadonlyArray.

@khanhduynguyen4726 5 ай бұрын

we need src code :(

@borcio6990 5 ай бұрын

first x )

@einfacherkerl3279 5 ай бұрын

the modal and button should not be treated as one component because it violates the single responsibly principal. it has a button that invokes modal and also the modal. the button should start there. only the modal box should b go in separate component. it should take a prop visible that should come from the parent.

@cosdensolutions 5 ай бұрын

Sure, you could also do that. It's debatable though because the whole component would re-render if you did it that way but again, it's not that strict it's just one way of doing things out of many

@einfacherkerl3279 5 ай бұрын

@@cosdensolutions React.Memo would be one solution to rerendering. don't re render until props change

@Pilosofia 4 ай бұрын

It is called the single responsibility principle not the single element or component principle.

@einfacherkerl3279 4 ай бұрын

@@Pilosofia I don't understand what you mean?

@stanislauyan3204 4 ай бұрын

Single responsibility principle was created for the OOP as part of SOLID principles. In react world the re-rendering should be taken into account. And author is totally correct to make such refactoring. CUPID would fit much better in react, but still you must take into account how react works to make efficient and maintainable code. I think author should not use such name for that part, bcs it confuses a lot.