When should you refactor larger React components into smaller ones

[@thydevdom]

This has become my favorite channel as someone building their first larger project.

[@kaloianangelkov4919]

Same here

[@NathanBudd]

This is very apt, as I was working on a component that felt too big today, so I decided to re-factor in a similar vein to what you've done here. Nice video and some good food for thought.

[@Evikeuklavier]

In these scenarios I like to make a sub components directory in the directory of the component that needs these components that aren’t really reusable somewhere else. Header directory would have another components folder where you put these logged in, logged out links components, etc. works for us :)

[@WebDevCody]

Yeah I could see having a sub components directory if it helps label what is a private component vs public component

[@s8x.]

man i wish there were more types of these videos instead of full on website clones. this is way more helpful for escaping tutorial hell and doing things on my own

[@alexjones420]

I have been a developer for just over a year and mainly focusing on FE & react and this has been one of my biggest question. I’ve been going by a ~150 lines of code max for a component as a rule of thumb. Definitely not set in stone but once I have a file that size I know to start looking for ways to break up the jsx into separate components or any business logic that can be extracted as a util or custom hook etc.

[@WebDevCody]

Yeah if the component is too hard to understand or find specific areas of concern, it’s time to split it up

[@alexjones420]

@@WebDevCody yeah exactly. Either for reusability or maintainability

[@amankaushik5833]

damn! You continue to impress me with your refactoring! I really admire your thought patterns.... would love to know how you got there as a programmer.

[@Alexjemapplesyrup]

You can probably use headlessUI for your menu thingy, works with tailwind pretty nicely

[@WebDevCody]

I’ve been checking it out, it have a couple of nice pre made components

[@butwhothehellknows]

Good job babe!

[@sprioleau]

I love seeing this support from your wife on so many of your videos. I’m a recent subscriber and have noticed it several time already. It’s great to see. Thanks for your content. It’s nice to see that it is focused more on experienced engineers. I look forward to it each week. Keep going. I’m rooting for you.

[@ccanyanwu]

I love your videos a lot. They are real and explanatory. Which vscode theme do you use?

[@WebDevCody]

Material community high contrast

[@ccanyanwu]

@@WebDevCody thank you

[@subhasishnath3078]

What extension are you using to get those next errors on the page? it's so cool.

[@WebDevCody]

Error lens with tyoescript

[@subhasishnath3078]

@@WebDevCodyThank you. 🙂

[@tmraaex9617]

If I want to make a component render on all pages like a navbar and i put it in app.js (next.js) how do i make its state reliably update when i log in and out? I have had this problem for a long time

[@WebDevCody]

Are you using next auth? If there is no session.data you can hide it

[@mazmerox]

What is the name of the extension that shows warning and errors directly in vscode?

[@mahalaxmigandham9542]

eslint

[@IStMl]

no its error lense eslint is the linter that finds the errors@@mahalaxmigandham9542

[@ThanHtutZaw3]

Question For Typescript: When I open other people ts code in vs code and it has a lot of red underlines. Then I restart vs code and that error lines gone away. What is happening to me? I am zero typescript

[@alexjones420]

Just your linter bugging out while it runs the initial parse

[@nemanjavucic6653]

crtl+shift+p => TS restart server

[@Izzat-bj1le]

why not hide components from css instead of conditional rendering?

[@Abhi-ow6xe]

What theme are you using ??

[@WebDevCody]

Material community high contrast

[@Abhi-ow6xe]

@@WebDevCody thank you!!

[@stanimirdimitrov4913]

A refactor idea: 1. Make an array of all LoggedInLinks. 2. Construct a type for all of them 3. Map them into an element.

[@WebDevCody]

That’ll work at well

[@CottidaeSEA]

Regarding the click event stuff you had, wouldn't it be possible to add an invisible div around the entire screen (has to be sticky) which has onClick to close? Not sure how well it'd work due to it possibly intercepting other events, pointer information and such, but it's the most React-like way I can think of to solve that. Maybe some other person has a better solution to it without using event listener on the document. I know of other solutions that also use event listener on the document which are neatly wrapped into a hook, but from what I've understood there are some issues regarding iOS (of course) with that method. I have a burning hatred for iOS, as a side note.

[@WebDevCody]

That would be a fun thing to checkout. It always seems hacky adding event listeners directly to dom elements

[@Sammysapphira]

This is very hacky and not good. The div would be blocking interaction below it. It's amazing for modals that demand the full user attention, but not a drop-down menu where users often click on other parts of the page without closing the drawer.

[@NullViewer]

300 lines.... lol. I just got a legacy project of 18000 line JS files. Having fun. None of linters formatters etc can handle that. 😂

[@liquidcode1704]

I love tailwind... hate the pos libraries/packages (whatever u call them) that implement tailwind. You know what they say about wanting something done right