React Components vs normal HTML: Which has better performance?

user_13275635 0
Viewed 768

Does creating Components for every single thing help? For instance, I'm using bootstrap for much creating the layout like:

<div className="row">
  <div className="col">
    <h1 className="m-0 display-6">Retail Landscape</h1>
    <small className="text-muted">View location heatmaps</small>
  </div>
</div>

However, there is an option to create components and do something like:

<Row>
  <Col>
    <Header>Retail Landscape</Header>
    <Para>View location heatmaps</Para>
  </Col>
</Row>

If I'm not willing to do any state management on these components, is it more sensible to create such components or does it just bloat React.js? Is there any real performance advantage by componenting every single thing?

Your insights would be helpful! Thanks.

reactjs html javascript
3 Answers

If I'm not willing to do any state management on these components, is it more sensible to create such components or does it just bloat React.js?

Both of your examples are using react (I can say in the first one because of the className instead of class in raw html) and you could add state managements to both of them:

<div className="row">
  <div className="col">
    <h1 className="m-0 display-6">{title}</h1>
    <small className="text-muted">{subtitle}</small>
  </div>
</div>

So the use or not of state / props here should not be a deciding factor between the 2 approaches.

Is there any real performance advantage by componenting every single thing?

You could try and run a benchmark. Most of the performance impact of react is caused by the overhead of the library, the diffing and reconciling with the existing DOM, heigh of the tree, number of renders etc.

Between the 2 given examples the difference is slim, in one case React will create react elements that map directly to html, in the second example there will be a level of indirection with Components that render those same element, with some other small differences.

So in theory example 1 will be slightly faster (as less ops) but in practice probably no change observed.

user_13803320

I think if you are not willing to use any state management, then normal HTML tags have batter performance vs React components which are passing through react engine then converted to basic Html. And HTML tags are the most basic and fast,quality enough to do their job.

user_101777560

One of the main reasons for using components is so that we don't have to write to same code multiple times which makes it easy to maintain and scale up.

Let's say you have 20, 30 or even 100 components with the .col class in your project and after an update the classname changes from .col to .column. Now you have to go through each component and update the classname. But when we use a Col component we can update the code in a single place and it will be updated throughout our project. This will not only save time but will also remove the risk of missing the change in some places.

As of performance, if you have performance issues the first thing you should look at wouldn't be the use of a component or normal HTML. Instead look at the file sizes, unnecessary rerenders, unused code etc.

user_32576220
Related