When should you refactor larger React components into smaller ones

Just sharing some insights into when to refactor a larger react component into smaller more manageable sub components

------------

[thydevdom]

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

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

[sx.]

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

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

[Alexjemapplesyrup]

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

[alexjones]

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.

[amankaushik]

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.

[stanimirdimitrov]

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

[ccanyanwu]

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

[tmraaex]

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

[subhasishnath]

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

[mazmerox]

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

[ThanHtutZaw]

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

[Izzat-bjle]

why not hide components from css instead of conditional rendering?

[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. 😂

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

[liquidcode]

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