React props: Should I pass the object or its properties? Does it make much difference?

You should prefer your second example, to pass the props individually. There you can see explicitly which arguments are passed and can quickly compare with which arguments are expected. This makes collaboration along people much easier and makes the state of the application more clear.

I personally try to avoid passing whole objects if it's not needed. It's like the spread operator where there can be any property inside and it is much harder to debug in a bigger scope.

Some additions to pure react like prop-types or typescript might help to define clear and expected properties in a big application


According to the principle of least privilege, this is a correct way:

<InnerComponent name={object.name} image={object.image} />

This restricts InnerComponent from accidentally modifying original object or accessing properties that aren't intended for it.

Alternatively, properties could be picked from original object and passed as props:

<InnerComponent {...pick(object, 'name', 'image')} />

If there are numerous properties that are tedious to list, there may be single prop that accepts an object:

<InnerComponent object={pick(object, 'name', 'image')} />

Since JavaScript has no type annotation, the second choice would be much preferable, as mentioned by @mstruebing the code will be more maintainable. However, if you are using TypeScript React (which support type annotation), both choice would be equally clear. But do keep in mind, the first choice promotes tight coupling between views and models, this allows fast development as you don't have to type much; while the second choice might slows down development but you have higher flexibility and tolerance to future changes.

So, the gauge is: if you favor development speed over flexibility, go for choice 1; if you favor flexibility over development speed, go for choice 2.

Extra notes

Ok, when should we favor development speed over flexibility? Here's my 2 cents.

If your project was meant for short-term usage (for example developing an app just for collecting votes during election), then go for the first choice.

If your project was meant for long-term usage (for example online bank transaction portal), you should go for the second choice.