search

TVke / react-native-tailwindcss

A react-native style system based on TailwindCSS
https://tvke.github.io/react-native-tailwindcss/
MIT License
565 stars 34 forks source link

Tailwindcss performance issue. #58

Closed byteab closed 3 years ago

byteab commented 3 years ago

if we make styles like this

<View style={[t.absolute, t.inset0, t.p4, t.bgBlue500]} />

then on every re-render a new style object will be created and it will cause a real performance bottleneck

TVke commented 3 years ago

Hi @EhsanSarshar

This is true, for now all the styling option are loaded when the import is used. But in my findings this was never a problem so maybe use a component or you can also look up the definition of the style and use them instead. For now I have no idea if there is a better way to handle this and improve performance, but feel free to explain a more performant option.

Greetings Thomas

smlarkin commented 3 years ago

@EhsanSarshar If you are concerned with perf, you can inline memo your styles:

https://github.com/andywer/use-inline-memo#style-props--other-objects

byteab commented 3 years ago

Ok @TVke thanks a lot I will try to find a way for that maybe a babel plugin or something else. and @smlarkin thanks a lot for the mentioned library. I will use that