Let's suppose that

1. You have a List ponent that iterates through a list of 10 posts and calls the Post ponent for each one.
2. You want to make the current route available to each Post ponent using React Router's withRouter higher-order ponent:

For example:

const List = ({posts}) => {
  return <div>{posts.map(post => <Post post={post} />)}<div> 
}

There are two possible patterns:

1. Wrap each Post with withRouter.
2. Wrap List with withRouter and pass Router as a prop to Post.

The first approach makes more sense logically (withRouter lives together with the ponent that uses its prop) but results in 10 withRouter wrappers in your virtual DOM.

Are there any downsides to this? Maybe from a performance standpoint? Or is it fine?

Let's suppose that

1. You have a List ponent that iterates through a list of 10 posts and calls the Post ponent for each one.
2. You want to make the current route available to each Post ponent using React Router's withRouter higher-order ponent:

For example:

const List = ({posts}) => {
  return <div>{posts.map(post => <Post post={post} />)}<div> 
}

There are two possible patterns:

1. Wrap each Post with withRouter.
2. Wrap List with withRouter and pass Router as a prop to Post.

The first approach makes more sense logically (withRouter lives together with the ponent that uses its prop) but results in 10 withRouter wrappers in your virtual DOM.

Are there any downsides to this? Maybe from a performance standpoint? Or is it fine?

• javascript
• reactjs

Share Improve this question Follow asked Dec 11, 2016 at 8:33 SachaSacha 2,00711 gold badge2626 silver badges4141 bronze badges 5

• if you have to stick with these options, you should go with the second option. its going to be more efficient, the posts are by nature rendered by the list and you can pass that prop very easily. The only fallback is you need to ensure that if for some reason another ponent would render the Post you need to pass the withRouter prop. That being said I wouldn't make each post call router methods. Rather i'd make a higher order ponent handle that routing and pass methods to call down to the children. this way you get consistent routing throughout the application. – John Ruddell Commented Dec 11, 2016 at 8:44
• 1 Well, my question is about HoCs in general, so making a HoC to handle routing would just pose the same issue. When you say it's "more efficient", is that based on data, or just your preference? – Sacha Commented Dec 11, 2016 at 8:52
• the overhead of rendering each ponent wrapped with the router is more than when on the list. if your posts grew to a large number you could potentially see browser performance issues. Why not use browserHistory or something instead of a posed / wrapped ponent. – John Ruddell Commented Dec 11, 2016 at 8:56
• 1 Just to clarify, my question is not about routing, I just used withRouter as an example. It could be any kind of HoC. So suggesting browserHistory is not very helpful… – Sacha Commented Dec 11, 2016 at 9:00
• sure, I'm just posing an alternative to a particular piece of functionality, since there is one. My other ments about which method to use still stands as is. – John Ruddell Commented Dec 11, 2016 at 9:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

In short: using higher orders ponents as-is may cause you to hit performance issues sooner, so you would have to do a bit of extra work to optimize for performance when you hit these problems.

The downside to your first option is that you would instantiate an extra ponent instance for every list item. Depending on the length of your list you would hit performance issues sooner. So what you want to do is reduce the number of ponent instances but not give up on the pasability HoC's give you.

Now Andrew Clark has given a great talk about HoC's and how he built Repose which provides utilities to "squash" HoC's with their child ponents, reducing the number of ponent instances and improve performance. As he mentions, squashing is possible if you are using functional ponents and if they don't access "context".

I don't have any benchmarks to cite, but there was a really great talk about performance and React by Steve McGuire. https://youtu.be/5sETJs2_jwo?t=15m55s. I'd remend watching the whole video, as he talks a lot about HOCs and performance in the context of super low-powered devices. The takeaway here is that they have extremely high performance goals on very constrained devices and are still using plenty of HOCs. Unless you are rendering very large datasets, or doing something where you're triggering way too many renders, you should be fine to wrap each Post in withRouter.