How many components are too many in ReactJS?

Question

Take a "Contact Us" form as an example. I could just build the entire thing in one component, or it could be really decomposed: every text field is a component, submit button, etc .... How does one know how much form should be deconstructed and rebuilt as Components?

Answer 1

My rule is to component-ize things that can and will be re-used in your app, either aesthetically or functionally. If this is the only form you need it is probably not worth the overhead of converting each element to a component. But if you will have many forms consider making components.

Example reasons to component-ize your form elements:

• Special form field functionality (InputEmail: does front-end validation for email inputs)
• Styling (SubmitButton: always red, full width, etc.)

In bigger projects I have worked on this has worked out well. I have a set of customizable form components so I can build a styled form with complex functionality. Usually it will look something like:

<Form onSubmit={this.handleSubmit}>
    <Input default label="Email Address" type="email" validate={validateEmail} />
    <Input default label="Password" type="password" />
    <Button primary type="submit" />
</Form>

• Form performs general validation logic
• Input runs a validateEmail prop and renders the label
• You get the idea...