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

github logo ・1 min read

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


twitter logo DISCUSS (2)
markdown guide

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).


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)

Classic DEV Post from Jul 2

How to refill someone’s β€œcup?”

Sometimes we rely so much on our friends and coworkers that we often forget to ma...

KaRthick profile image

Don't miss out on the next important post

Sign up (it's free!)