TVke/react-native-tailwindcss

Tailwindcss performance issue.

byteab opened this issue · 3 comments

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

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

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

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

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