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?

Sheilahshekel

I don't think there is any problem with the number of properties that a React component can have. It looks ok. – Sporangium

What type of best practice are you looking for? You could shorten your syntax by using the spread operator for instance. – Boycie

The best practice is to use propTypes inside your component to announce the form of the props. Beyond that, you are free to put in as many props as you want. Also, at least for public components, have good defaults to promote succinct usage. – Withstand

I would also note here that when you have a component class whose only method is render() you can declare it as a functional stateless component, which accepts props as its arguments and returns your element ({ create, update, categories, ... }) => { return ( <div className="job-container"> <JobForm ... /> </div> )}. This specific example could be written as (props) => <div className="job-container"><JobForm {...props} /></div>. See medium.com/@dan_abramov/… – Steffin

@Steffin pseudo code – Sheilahshekel

This is nothing, I have seen like 3-4x that number of props. I'm not saying its wrong or right. Personally I wish I could have a limit of 5 or so props. Or at least relevant props for the component. I find usually, components can be broken down and they have not - hence the high propulation density. – Cysticercus

Answer 1

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.

Truly

Answer 2

For years there have been style guides in many languages that suggest limits to the number of params to a function. Even ESLint has a rule regarding this and states: "...can be difficult to read and write because it requires the memorization of what each parameter is, its type, and the order they should appear in.".

I think this is true in JSX too. And since, JSX is a DSL of JS, we're compiling code smells, kind of.

Inviolate

Agree. I was told my my lecturer that once you are passing 5 or 6 params into a function, consider if you could use an object to wrap them. I believe the same applies to JSX too. It's not a hard rule. Its just a suggestion if it will help you and others to read code a little easier. – Cysticercus

Answer 3

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.

Monreal

Although props will be passed down that have no relation to this component. – Sheilahshekel

Answer 4

No there is no respective limits of using props in a component yet I have used 12 props in a component

App.js component

import Map from './Map';

const arr = [1,2,3,4,5];
const arr1 = [1,2,3,4,5];
const arr2 = [1,2,3,4,5];
const arr3 = [1,2,3,4,5];
const arr4 = [1,2,3,4,5];
const arr5 = [1,2,3,4,5];
const arr6 = [1,2,3,4,5];
const arr7 = [1,2,3,4,5];
const arr8 = [1,2,3,4,5];
const arr9 = [1,2,3,4,5];
const arr10 = [1,2,3,4,5];
const arr11 = [1,2,3,4,5];
const arr12 = [1,2,3,4,5];
const arrAlpha = ['A','B','C','D'];

const App = () => {
  return (
    <>
     <h1>App page</h1>
     <Map 
      alpha = {arrAlpha} 
      numb={arr} 
      beta={arr1}
      gamma={arr2}
      delta={arr3}
      sigma={arr4}
      theta={arr5}
      sin={arr6}
      cos={arr7}
      sec={arr8}
      cosec={arr9}
      tan={arr10}
      cot={arr11}
      tri={arr12}
    />
    </>
  )
}

export default App

Map.js Component

const Map = (props) => {

const one = props.alpha;
let itemOne = one.map((items)=><li>{items}</li>) 

const two = props.numb;
let itemTwo = two.map((itemst)=><li>{itemst}</li>)

const three = props.beta;
let itemThree = three.map((beta)=><li>{beta}</li>)

const four = props.gamma;
let itemfour = four.map((gamma)=><li>{gamma}</li>)

const five = props.delta;
let itemfive = five.map((delta)=><li>{delta}</li>)

const six = props.sigma;
let itemSix = six.map((sigma)=><li>{sigma}</li>)

const seven = props.theta;
let itemSeven = seven.map((theta)=><li>{theta}</li>)

const eight = props.sin;
let itemEight = eight.map((sin)=><li>{sin}</li>)

const nine = props.cos;
let itemNine = nine.map((cos)=><li>{cos}</li>)

const ten = props.sec;
let itemTen = ten.map((sec)=><li>{sec}</li>)

const eleven = props.cosec;
let itemEleven = eleven.map((cosec)=><li>{cosec}</li>)

const twelve = props.tan;
let itemTwelve = twelve.map((tan)=><li>{tan}</li>)


return (
        <>
            <h1>React Map Items</h1>
            <ul>
                <li>{itemOne}</li>
                <li>{itemTwo}</li>
                <li>{itemThree}</li>
                <li>{itemfour}</li>
                <li>{itemfive}</li>
                <li>{itemSix}</li>
                <li>{itemSeven}</li>
                <li>{itemEight}</li>
                <li>{itemNine}</li>
                <li>{itemTen}</li>
                <li>{itemEleven}</li>
                <li>{itemTwelve}</li>    
            </ul>
            
        </>
    )
}

export default Map

Diverting