Refactoring a React component - Design Patterns

[@cosdensolutions]

Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc

[@jaortiiss]

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.

[@VineetS-s5x]

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

[@abrahamibizugbe477]

Mehnn.. this is the smartest idea for a SE tutorial content I have seen on YT.. You're doing a great job Man❤️❤️

[@kennardsugirotok7374]

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

[@fellypsantos_]

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

[@irfansaeedkhan7242]

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

[@cosdensolutions]

well, I'm here now ☺️

[@ry902]

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

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, ...

[@joaomarcelofurtadoromero8277]

Gold content, would love to see more refactoring

[@chrismixlist]

your videos provide information with great value 👌

[@excelnutcracker4312]

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!

[@NaDennIsGut]

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

[@cosdensolutions]

will do!

[@coder_one]

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]

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

[@cristhianjhlcom]

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

[@prashlovessamosa]

He already created a video.

[@fdk.5390]

@@prashlovessamosa That's what he asked.

[@nickwoodward819]

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

[@BSK_Rick]

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

[@iLLiaGoncharov-d1r]

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

[@MohamedRabi]

awesome video! Thank you 👍

[@bleakCode]

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

[@a7mdbest15]

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

[@belkocik]

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

[@sondernfy]

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

[@jech33]

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]

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

[@jech33]

@@cosdensolutions awesome

[@daveboo7002]

It sounds like your mic is on your keyboard?

[@HerlonCosta]

Amazing explanation, thank you so much!

[@rjwhite4424]

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

[@cruzlee4092]

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

[@saqibmuhammad7218]

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

[@tomassinkevicius6786]

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]

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

[@stn1k3]

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.

[@gmjitendra]

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

[@LinhNguyen-gx5fb]

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

[@quanganhinh6252]

Really good video, please do more

[@genericbinary558]

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

[@LogopedLTD]

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

[@conallen3166]

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 : -)

[@doniaelfouly4142]

Thanks

[@mahdiimad1447]

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]

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

[@teenspirit8714]

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

[@-mahmoudadel2628]

Waht about making a video for event tracker and how to integrate google analytics with react? ❤

[@rea_kr]

Could you upload the starter code to your GitHub repository? I'd like to follow along while watching the video.

[@mfion1]

Nice video

[@codexpath2960]

awesome review

[@tony-gx7rt]

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

[@marcelp4825]

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

[@cosdensolutions]

No reason, I just use both interchangeably

[@exequiel_hyan]

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]

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

[@shmida1991]

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

[@aliqureshi4194]

We need a refactoring course 😅

[@mustang9951]

quality content

[@aytacklnc6642]

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

[@cosdensolutions]

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

[@ilmanmanarulqori5632]

lets goooo!! 🎉

[@MohammedShibincp]

can you make video in react roadmap pls

[@cosdensolutions]

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

[@albiceleste101]

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?

[@thanirmalai]

Amazing videos

[@Quintusflac]

I like it

[@MrKarl992]

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]

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

[@uome2k7]

Isnt the track page hook approach the facade design pattern?

[@Kaltste1n]

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

[@wakandagaming5763]

hi can u make playlist about react desain pattren? thanks

[@Gangbuster74]

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

[@juozasmas]

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

[@Gringo0517]

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]

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]

@@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

[@onintuverachannel]

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.

[@ZakTheCreator]

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

[@aminda6862]

great thanks a lot

[@malekimam1444]

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]

yeah you totally can!

[@AndreyBelfu]

what vs command do you use for importing files?

[@cosdensolutions]

Just normal imports from vscode

[@lyrical6852]

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

[@mohamedhakem7355]

@@lyrical6852 Ctrl + space on PC

[@HarshVikramSingh-d1b]

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!

[@joseortiz3806]

Pls, what is the theme name of the editor?

[@cosdensolutions]

Vscode

[@Becherman]

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

[@abhinavdhama3014]

Bro can we have one redux think middleware video also?

[@akhs001]

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

[@ignacioarriagadairiarte4338]

what is your react code snippets extention?

[@cosdensolutions]

check out the video I made on vscode

[@HelenaDuGraus]

interface or type for components props?

[@cosdensolutions]

I've switched over to types for everything now

[@kost32]

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]

Yeah that's actually better! Nice

[@einfacherkerl3279]

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]

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]

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

[@Pilosofia]

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

[@einfacherkerl3279]

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

[@stanislauyan3204]

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.

[@DamilolaBada-x3x]

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]

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

[@DamilolaBada-x3x]

@@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

[@khanhduynguyen4726]

we need src code :(

[@Wakkyguy]

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]

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]

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]

@@cosdensolutions sure, thanks

[@aleks6331]

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]

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

[@xatrox2803]

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

[@cosdensolutions]

I made it myself, see my vscode setup vid

[@davyengone]

At the moment of writing this comment, this video has 1400 views and 11k likes. Something is off with KZbin. Nice video though

[@cosdensolutions]

Yeah it's a bug, it shows 160 likes and 2.4k on yt studio

[@borcio6990]

first x )

[@davidezerrilli711]

I'm always a little bit scared of refactoring without setting unit test before refactoring but you know sometimes business times are not dev times

[@gixxerblade]

UserProductsPage will still be rerendered every time the modal shows.

[@cosdensolutions]

it won't. Child re-renders don't cause parents to re-render

[@Shadel.]

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.

[@nickwoodward819]

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

[@benyamin4634]

thanks