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
KaRthick
Posted on • Edited on
what is the difference between looping the div and making it as separate component and looping?
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (2)
I can think of two (I hope others can see things I missed 😉) reasons for creating
SubDinstead of usingdivs directly.1. Readability
It's easier to "describe" what the part of the code is doing.
SubDis 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 ofdivis always re-rendered when the parent component is re-rendered.If that
SubDrequires a heavy calculation, it'd make your site slow.You can probably optimize the performance by turning the
SubDinto a PureComponent or override shouldComponentUpdate() to check if the component (SubD) should be updated or not. (Hooks has no equivalent to shouldComponentUpdate btw).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)