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