Stylesheet.create mystery

[byteab]

Introduction

Does Stylesheet.create({...}) has any performance benefit ?

Details

as it's stated in a comment in the Stylesheet.js, refer as id is not implemented yet.

It also allows sending the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).

So is it mandatory to use Stylesheet.create and add an overhead?

Discussion points

if it's not mandatory, maybe we can mention it in the React Native Doc

[gwmccull]

I'm not on the core team member but I can talk about how I use and think of Stylesheet.create

It's not mandatory. Inline styles may be used as it states in the Style docs, and as it says there, it's often cleaner to keep all the styles in one place instead of inline

Regarding performance, I don't think eliminating a single function call to Stylesheet.create per file is going to give you any sort of performance improvement that is worth thinking about. Assuming that you declare your styles outside of the component declaration, as many people do, then that function call only happens once when the JS bundle is evaluated.

And inline styles have the theoretical performance penalty of declaring new inline objects on each render cycle (which is complicated by the optimizations performed by the JS engine). This also isn't likely to impact performance in any significant way

So neither way of declaring styles is likely to change the performance of your app in any perceivable way

However, in the future, it sounds like the "refer as id" may bring performance updates so it may be worth using Stylesheet.create now, in order to avoid the pain of having to refactor your app later

I prefer using Stylesheet.create to keep styles centrally located which I think makes it easier to read the components, but you should probably use whatever you and your team prefer

[byteab]

Thank you @gwmccull for your detailed comment.
but the discussion is not Stylesheet.create vs inline style.
I mean instead of const styles = Stylesheet.create({...}) we can use const styles = {...}.
the only benefit of Stylesheet.create is auto type IntelliSense. which I think we should mention in the doc. and also with the new React Native Architecture, I don't think there would be any benefit to using refer by id.

[elicwhite]

One of the other reasons StyleSheet.create can be beneficial is for platforms that do use it to make optimizations. For example, on mobile today it is an identity function and would be the same runtime performance as using an Object, but for React Native Web, I believe it uses that for an optimization.

So using StyleSheet.create opens doors for optimizations in the future, even for platforms where it isn't doing anything special today.

[byteab]

@TheSavior got it. Thank you Eli White. maybe we can mention it in the Doc because most of the users think that it's an optimization on mobile.

[obasille]

@TheEhsanSarshar just wondering if you have some insight about the present state of the "style id system"?

As of today, the sentence that was stating that this system isn't implemented has been removed from the doc, but looking at the source code I don't see any such system.

StyleSheet.create() simply returns the given object:
https://github.com/facebook/react-native/blob/130a951e2e346a1554fa3965bfa79ab8d489ad86/packages/react-native/Libraries/StyleSheet/StyleSheet.js#L364

And StyleSheet.flatten() doesn't internally use "StyleSheetRegistry.getStyleByID(style)" unlike what the doc says:
https://github.com/facebook/react-native/blob/130a951e2e346a1554fa3965bfa79ab8d489ad86/packages/react-native/Libraries/StyleSheet/flattenStyle.js

Also StyleSheetRegistry doesn't even seem to exist!
https://github.com/search?q=repo%3Afacebook%2Freact-native%20StyleSheetRegistry&type=code

[obasille]

Just found out that StyleSheet.create() stopped using ReactNativePropRegistry five years ago:
react/react-native@a8e3c7f