I posted this on stack overflow and it was immediately closed by someone who thought it was too "opinion based". Another comment was that the question is misguided. Maybe so! I should let the needs to the application drive what I write as opposed to the needs of the framework or library - BUT - I still feel this is a good question that is not addressed by the teachers very well, if at all. I am interested to see what people have to say about it.
I would say that around 50% of the questions I have every posted on stack overflow have been a BAD BAD BAD experience. Someone claims a question has been asked before or they say it's opinion based or they yadda, yadda, yadda. None of that is helpful at all. I seriously dislike stack overflow because of this sort of thing. Every few months, I make the mistake of posting a question there and get reminded why I avoid stack overflow.
This time they said the question was opinion based. I really can't argue with that. I am, in fact, seeking your opinions. I'm just getting into React. I've read the documentation, watched some videos, and I'm taking a course by Meta. Everything I see as examples are tiny little chunks, such as, a component which is just a button or another component which is a submit button and two form fields, etc.
I get that the idea is to have small REUSABLE components. Like a Bootstrap Card component that can then be rendered anywhere.
What I'm struggling to get my head around is where to draw the line in terms of the size and complexity of a given component. For example, I want to write an app for creating a welder qualification record. There are a total of, say, 80 form fields that will need to be filled out.
These form fields can be sub-grouped topically, like this:
- General Welder Information - 10 form fields
- Base Metals - 10 form fields
- And so forth…
Scenario #1 - I could break this down into 80 components - one for each form field.
Scenario #2 - I could break it down into one component for each topical subgroup.
Scenario #3 - I could make it one component that contains everything in the form.
With this specific task of creating the welder qualification form, there is nowhere else that the form fields (Scenario #1), or the topical sub-groups (Scenario #2) would ever be used. In other words, I won't ever need those theoretical components anywhere except on the single page where form lives. So why not write this as in Scenario #3?
From a functional point of view, Scenario #3 makes sense to me. the form serves one purpose and one purpose only. Therefore, it should be treated as one thing.
Is there another good reason to break this down into smaller components aside from potential future reuse of the component?
I expect that all of the form fields will be something like 2,000 lines of JSX without adding state and event handling.
The question is: What's the best practice? and WHY?
Top comments (0)