7

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

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

3 Answers 3

10

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.

1
  • Thanks for your answer. I'd like to know more details about sending an object as a prop. It seems to be an interesting technique.
    – Anh Tran
    Commented Oct 20, 2020 at 6:56
4

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.
4
  • 1
    What about e.g. event handlers?
    – AKX
    Commented Oct 16, 2020 at 10:12
  • 1
    Whether if the prop is a function(event handler), object or a single property it is the same - lower number of props causes the component to be easier to maintain.
    – bamovh
    Commented Oct 16, 2020 at 11:15
  • 1
    Thanks for your answer. I like minimum number of props, so I choose your answer.
    – Anh Tran
    Commented Oct 20, 2020 at 6:57
  • 1
    For design system components like Button, Text, Alert, etc, having more than 7 props is very normal. This guideline is only more relevant to product components. Commented Jul 26, 2022 at 0:10
3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.