Question about React architecture and organizing files
Hi there! I recently finished a project with a team in which we used MUI for the styles. The project turned out working perfectly fine, but I wasn't really happy that we ended up with files of 200 300 lines of code. I think that MUI doesn't help since when you declare the styles, prettier makes each property a different line so you end up with a <Box> that is 10-15 lines long. This plus the logic of that component made these files big. Now, I have two questions regarding this:
- Should I create more components when the file gets too big, even if that component is not reusable? For example, let's say that I have a certain section of the page that is unique but is also very big, is it okay if I create multiple components for this section even if those components will only be used there? This would be in order to keep files more concise and organized
- Is it okay to abstract the logic of a component in a custom hook even if that hook is not reused later? So let's say that I create a custom hook to handle a certain form with some specific inputs, and I want to control those inputs in a way that is incompatible with other forms in the application. Is it bad practice if I create a custom hook that won't be reused later on? Just for the sake of abstracting the logic of a component and just importing the necessary things from the custom hook. This with the idea that will separate the concerns of the files and help in avoiding big 200 - 300 lines of code files.
Hopefully my questions were clear and not too newbie for this discord! Thanks ❤️
3 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Both are good tools, but don’t be afraid of big files just b/c they’re big. If you’re able to get in quickly, understand what’s going on, find what you’re looking for and make changes then it doesn’t matter how big the file is.
If creating a new component or custom hook makes the file easier to deal with and / or easier to understand, then ofc it’s a good idea.
I create custom hooks that only get used once some times, as well as components, but I try to only do it when it’s clear that it makes the code easier to deal with. Breaking up things too much can be bad as well.
In my opinion a nuanced approach works best. But to answer your question it’s totally fine to do those things
we have tons of 200-300 line files in our codebases and they’re still super easy to deal with. If we broke them up further it might actually decrease maintainability
Thanks to you both! Very useful information