React: Are there respectable limits to number of props on react components

Question

At times I have components with a large amounts of properties.

Is there any inherent problem with this?

e.g.

render() {

  const { create, update, categories, locations, sectors, workTypes, organisation } = this.props; // eslint-disable-line no-shadow

  return (
    <div className="job-container">
      <JobForm
        organisationId={organisation.id}
        userId={user.id}
        action={action}
        create={create}
        update={update}
        categories={categories}
        locations={locations}
        sectors={sectors}
        workTypes={workTypes}
      />
    </div>
  );
} 

What are the best practices?

Answer 1

There are no problems with it, aside from verbosity, but of course, that will make your component fundamentally harder to maintain.

A common way to make it more general is to use the spread operator instead, to pass all those props down with shorthand.

<JobForm {...this.props} />

The other way to tackle the problem is to share the component's responsibility by splitting it up into smaller, more focused components that can be composed instead.

Answer 2

I think you have justly recognized a code smell. Anytime you have that many inputs(props) to a function(component), you have to question, how do you test this component with all the permutations of argument combinations. Using {...this.props} to pass them down only cuts down on the typing, sort of like spraying Febreeze over a dead decaying corpse.

I'd ask why you have both a create and update method vs a submit method?

How are you using theorganisationId and userId? If those are only needed to be passed to the create and update (or submit) methods that are also passed in, why not NOT pass them and let the onCreate/onUpdate handlers supply them?

Maybe JobForm should be rendered as:

<JobForm /* props go here */>
   <CategoryDroplist categories=this.props.categories />
   <LocationDroplist locations=this.props.locations />
</JobForm>

Within JobForm you have props.children but those are separate components that might be fine as separate components.

I just don't have enough information to answer the question, but by breaking your components into simpler things, the number of props go down and the smell decreases as well.