DEV Community

Zans
Zans

Posted on

5 years and I didn't even thought about it...

I have been in industry for more then 5 years, but never thought about one crucial optimisation which can be done in applications and it's so obvious...

Image description
In modern Web the crucial point as we all know is a performance. LET'S BE SERIOUS YOU WON'T WAIT TILL PAGE LOAD IF IT'S LOADIN FOR 5 SECS...

The think which I have discovered, well not me it was pointed to me if to be honest. To don't use props in Styled Components, if it's not necessary. Why?
Because how React works, on every prop change it would re-render a component. Let's take as example, we do have A small component which changes a colour on prop change..

Image description
Image description

versus using something like classNames and do css class name logic
Image description

Image description

Initially it renders for 2.8ms. One component...with a green color. Then we increase a counter to + 1. It will rerender this smallish component again.. which will take 0.8ms. Okay you can say this isn't much but imagine you DO have some complex logic and one state is changing a layout drastically.

Top comments (0)