Investigate caching
Closed this issue · 3 comments
It seems that Responsive style generator has performance problems with large styles. It makes sense, because the styles are generated for each breakpoint in an app, but the problem is that if component is shared across app, we don't need to generate styles over and over again because the instance is same unless a developer use styles prop or styles function.
We need to find a way to cache styles for same component across whole app and optimise it. For example if I have a Button and I use it on 10 places, I need to generate styles only for first render and then next 9 instance should just use it.
For example combination of ResponsiveDesignSystem + createResponsiveEmotionStyleGenerator seems to be problematic, because resizing of a window can cause recompute because responsive DesignSystem uses window.matchMedia to match current breakpoint, otherwise IsBreakpoint wouldn't work. This causes cache to reset on each change. We need to add check to IsBreakpoint component to warn developer if DesignSystem is not responsive.
We need to find out how to cache styles maybe for each breakpoint without reset? Maybe cache of all breakpoints and reset cache only on theme or styleGenerator change.
It seems that maybe caching intermediary stylesheets could help a little. Basically the point is, that if component receives parentStyles, those style sheet can be already resolved so maybe we should cache them in resolveStyleSheet and use the result directly if there is any.
Maybe it could be sufficient to add cache here
so if style sheets are not changed at all we'll store the result for a given breakpoint in WeakMap. Another option is to add extra cache forresolveStyleSheet call so at least if the list of style sheet changes, we can skip resolution of already known style sheets.Also we maybe should preserve cache if breakpoint is changed and cache per breakpoint and reset whole cache only if theme or generator is changed.