Memoize serialized styles passed to `styled`

[m4theushw]

The problem

Every time a styled component is rendered, it needs to serialize the styles even if they are the same from the previous render. That can be a hit in the performance when there dozens of instances of the same component and the styles need to do heavy transformations on the prop values, e.g. manipulate colors.

Proposed solution

Cache the serialized styles and return the same values if the cache key provided by the user didn't change. The cache key could be the "dependencies" of the styles.

Alternative solutions

Calling css inside React.useMemo works but in my context I can't call css directly.

Additional context

We're building a data grid where every cell is a styled component. Virtualization is already being used to recycle DOM elements. Although, on every scroll React has to render all nodes to compute the diff. The styles provided to each cell call some color manipulation functions which cost a bit of processing. React.memo can't be used because there're props on each cell that changes during scroll, but are not used in the styles.

[Andarist]

Calling css inside React.useMemo works but in my context I can't call css directly.

It would be nice if you could shed some more details on that.

[m4theushw]

Here's an example similar to what I'm doing: https://codesandbox.io/s/brave-drake-8t5bh?file=/src/App.js

I contains a virtualized container (using react-virtualized as an example) and each item is a styled component. Noticed that on each scroll it calls the function passed to styled. This can be a bottleneck on performance if the styles take longer to be serialized.

Calling css inside React.useMemo works but in my context I can't call css directly.

The data grid I'm building relays on the foundation of MUI which is a wrapper on top of styled. The css function is not re-exported by this package, see https://mui.com/system/styled/.

I would like to continue using styled but not to have the styles being serialized on every re-render if at the end (after serialization) they will be same.

[srmagura]

Sounds easy enough to support. Add dependencyArray?: any[] to StyledOptions. It would behave identically to the dependency array in React.useMemo.

My concern is that this is a very niche use case and the feature will be used extremely rarely. @Andarist thoughts?

@m4theushw is this still something you need for your use case?

[Andarist]

The problem here is that those components are being remounted (because they are virtualized). So using per-component cache won't solve anything.

@m4theushw could you create a more compelling codesandbox that would showcase what could be cached and how? What would be "inputs" for the cache? Ideally an example would showcase how that would be different from just wrapping Item with React.memo, like here:
https://codesandbox.io/s/gifted-elion-zq6z3z?file=/src/App.js:278-312

Note that on this codesandbox we are still going to see a lot of logs while scrolling but that's because those pure items are remounted and not because they are rerendered