what is the difference between looping the div and making it as separate component and looping?

Hi this is my first post in this community , seeking for a clarification.I'll attach the stackover flow link which I have posted and didn't get the proper clarification, kindly check the link and post your explanation

https://stackoverflow.com/questions/56872154/what-is-the-difference-between-looping-the-div-and-making-it-as-separate-compone

Comments

[Sung M. Kim]

I can think of two (I hope others can see things I missed 😉) reasons for creating SubD instead of using divs directly.

1. Readability

It's easier to "describe" what the part of the code is doing. SubD is not a good name as it doesn't show what the component is doing.

Probably "ProductCalculator" might be a better name 🤔

Readability would help your code become more maintainable (might be too much to name it right now but it will pay off).

2. Performance Optimization

When you use the div within the loop (.map), that part of div is always re-rendered when the parent component is re-rendered.

If that SubD requires a heavy calculation, it'd make your site slow.

You can probably optimize the performance by turning the SubD into a PureComponent or override shouldComponentUpdate() to check if the component (SubD) should be updated or not. (Hooks has no equivalent to shouldComponentUpdate btw).

[KaRthick]

hi @Sung M.Kim thanks for the response and sorry for the delay i am having a doubt still if that is performance optimization and readability how the quantity gets increased for all the rows in one case its correctly increasing for particular row (without mentioning the index)