search

robinweser / fela

State-Driven Styling in JavaScript
http://fela.js.org
MIT License
2.27k stars 182 forks source link

reconciliation and performance thoughts #139

Closed steida closed 7 years ago

steida commented 7 years ago

Rules can be memoized if app state is immutable (which always should be). Then we can detect rule change easily without diff. Therefore we know whether style should be updated. We can also leverage React life-cycle and references counting to remove unused styles. As a quick hack, we can clean styles after transitions like next.js.

johanneslumpe commented 7 years ago

I like the idea of memoization. Are you thinking about having all rules memoized by default? Or would that be something the consumer has to do manually?

The issue with using react lifecycles is that it will work for react, but maybe not for other libraries. We can of course add this to react-fela where we utilize the lifecycles. In order to clean styles after transitions, wouldn't we have to basically kill the whole previous stylesheet and append a new style node in order to prevent flickering?

steida commented 7 years ago

I like the idea of memoization. Are you thinking about having all rules memoized by default? Or would that be something the consumer has to do manually?

Probably config option for that. We can't expect that but we can leverage it a lot. No, the consumer should not do any manual job.

The issue with using react lifecycles is that it will work for react, but maybe not for other libraries.

Generic API. It's up to library if it can satisfy or not.

In order to clean styles after transitions, wouldn't we have to basically kill the whole previous stylesheet and append a new style node in order to prevent flickering?

Not sure yet. But with well designed garbage collection we should not need that.

robinweser commented 7 years ago

I am not sure how exactly you want to memoize the rules, but Fela does cache every single style variation and only updates if something changes.

That's why running tons of renderRule with the same rule/props is quite fast. It directly returns the className if already rendered previously.

TheUltDev commented 7 years ago

Memoized renderRule in https://github.com/rofrischmann/fela/pull/146

If the browser has native or polyfilled WeakMap support, prop object references will be used to cache classNames.

robinweser commented 7 years ago

Soon we'll have a much simpler API and high performance similar to styletron.