How costly is re-rendering svgs in React?

Viewed 18

I have a world clock component which shows the current time in different time zones similar to this - https://backstage.io/storybook/?path=/story/plugins-home-components-headerworldclock--default.

This component get re-rendered every second so I was wondering if I added an <img src={location/of/svg/flag}/> does the flag source get re-rendered every second or does it get cached/memoize (currently storing the flag svg locally but want to eventually move them to s3). If it gets fully re-rendered every second, how costly is this operation?

The final component would look something like

Timezone
Flag
Current Time

with 6+ different time zones in a multi level grid. The alternative is to decouple the static Timezone and Flag with the changing Current Time but I have not found a way to do it with keeping the current styling.

0 Answers
Related