Are styled components memoized?

Question

Just wondering if styled components are memoized or whether I can/need to do this independently? Specifically, are the props that are passed into the template literal memoized, such that the styled component is only re-rendered if the value of the props change?

If it needs to be done independently, how do you do this?

Answer 1

I checked the source code and it seems that it hashes the resulting CSS and only updates the page style when the hash is not already present. This should prevent changes to the DOM when the props do not change.

The component itself is not memorized. You could wrap with with React.memo() to achieve that. But you might run into issues when the theme changes.