Do you have any recommendations on how many props should be the best in a React component? I know there's no strict rules about the number of props, I'm looking for advice from experience developers to make the code clean and easy to read (I mean "best" is that).

I feel the number of props is similar to the number of parameters in other languages. In PHP, some people recommends to have <= 5 parameters. What about React?

And related to the number of props, do you have any methods to reduce it?

Thanks

Do you have any recommendations on how many props should be the best in a React component? I know there's no strict rules about the number of props, I'm looking for advice from experience developers to make the code clean and easy to read (I mean "best" is that).

I feel the number of props is similar to the number of parameters in other languages. In PHP, some people recommends to have <= 5 parameters. What about React?

And related to the number of props, do you have any methods to reduce it?

Thanks

• javascript
• reactjs

• you're asking for opinions – Jaromanda X Commented Oct 16, 2020 at 9:37

3 Answers 3

Note that this is only aesthetics issue, you can send as many parameters as you like, but there are best practices.

As you said, it's just like parameters to a function. Well, props are parameters. I would suggest using the minimum possible as long as it's readable.

Sometimes having 2 parameters (props) might even be confusing, say you send age and systemConfig to a component, these props are not related and might confuse the developer that will look at it in the future (This will probably be you)

And sometimes, having 7 props is ok because it's readable and all in the same domain. for example: you might send many person properties like age, height, weight etc. and it'll be fully readable.

Also, you might say, ok what if I'll send 50 parameters for that person component, in this situation you might be better sending the Person object as it is and let the component "dig" into the object and take all the variables that it requires.

I follow this rule of thumb: Three props is fine. Five props is a code smell. More than seven props is a disaster.

Of course this is not universal solution but my advice is that you must keep your component clear and easy to maintain. If the number of props are making the component bloated then you have reached your limit.

Proper composition should help you avoid passing props through multiple components. Try to handle events at the lowest possible point in the component tree.

Also to keep in mind if the component itself has a lot ot props then either:

1. Your components are each doing too much, and/or
2. Your components know too much about, and manage too much for, their children.

In fact, the number of props have very little connection with best practice and clean code. For example, an ant design component has over 9 props, and this is not mean ant design doesn't have clean code, best practice,..etc. if you implement a generic component with child components in order to use available places in your application, you would have to pass most of the props that child components have and it will most probably have 5+ parameters.

Consequently, the important thing is that you should have a general way of code, a mind. If there is a way of thought behind the implementation and if it is clean and understandable; counts will be nothing for other (good) code reviewers.