using StyleSheet.create({}) instead of inline style
engineerahkhani opened this issue · comments
as I realize and read your source code you use inline style instead of StyleSheet.create({}).
is it true or not? if yes is there any plane to replace it?
because as you know StyleSheet performance is much better than inline styles.
Because of how styles are dynamically created via props, we can't use StyleSheet.create in the typical fashion where it's statically declared outside the component's render function. We could use memoization to create new styles only when props change, but I would like to see a benchmark that proves it improves performance before implementing that.
Fun fact: StyleSheet.create does absolutely nothing but return the object: https://github.com/facebook/react-native/blob/5f03e7ef411d1b724d037bfa5b4150779505c3cc/Libraries/StyleSheet/StyleSheet.js#L372
common misconception that StyleSheet.create has better performance than inline styles. Any performance gains are usually a result of PureComponents not getting broken due to inline styles creating a new object on each render.
const styles = StyleSheet.create({ color: 'black' });is functionally equivalent to
const styles = { color: 'black' };The former does some validation in dev mode, thats pretty much the only difference.
Before I started using restyle I actually used a home-grown library that did just this. My method was to generate a stylesheet with all possible stylesheet options (e.g. "backgroundColor-blue500", "backgroundColor-blue600", etc. each with single prop-value combinations) and pass that around with context.
One of the first things I did when I discovered this project was to make the changes using a similar cached stylesheet approach and while I did get it working, I never sent a PR because the performance improvement wasn't measurable.
Do you think we can close the issue? or do you need other inputs? 🕵️
Closing since the facts seem to point at this not having an effect on performance.