Redux: Performance of list of connected components

user_1869326 0
Viewed 583

I have some <List> connected component which passes a lot of attributes to <ListItem> components. It is getting to the point where a refactor is needed because too many attributes are being passed down.

Suppose I turn the table and instead make <ListItem> a connected component so that I am not required to pass so many attributes down. Would I expect to see a performance degradation or improved performance of my UI rendering?

I've done some reading but wasn't able to find an exact answer to my question.

react-redux redux reactjs javascript performance
3 Answers
user_629370

You don't need to pass all the props one by one. You may use the spread operator to pass all the props at once:

<List myProp={myProp} {...rest} />

This will send one prop myProp and all other props exists in the rest props.

Or, you can pass all the props:

<List {...props} />

In the ListItem component:

const { myOtherProp1, myOtherProp2 } = props
<ListItem myOtherProp1={myOtherProp1} myOtherProp2={myOtherProp2} />

Also, you may pass the default props which you think is required for the component:

List.defaultProps = {
  myOtherProp3: 'My default prop 3'
  myOtherProp10: 'My default prop 10'
}

This way you're passing all the props but use them when you need to use them.

To answer your exact question:

No. There'll be no performance hit. There's no limit of the props. You can pass as many as you want. The receiving component will get all the props from single source props.

user_21387520

To expand on @Bhojendra Rauniyar's answer to your exact question: Passing props doesn't slow down React because it doesn't copy the information, it just creates a pointer to it which is really cheap. Javascript works in general like this, for example:

a = {foo:'bar'}
b = a
b.foo = "another bar"
console.log(a.foo)
    > "another bar"

Javascript recycled the reference to a.foo rather than copying it to b.foo. So changing b.foo also changed a.foo.

user_88944240
Related