React Native inline styles and performance

Question

Does the following:

Have any performance implications compared to:

&         


        

Answer 1

From the docs for StyleSheet

Performance:

• Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.
• It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).

Another benefit is that style errors will be generated at compile time as opposed to run time.

I personally still like using inline styles (and creating new components for shared styles) because it makes the code more readable for me and the performance hit has not been noticeable.

Answer 2

As mentioned in the comments of the selected answer, the performance comment has been removed from the RN docs, but in my project (a mobile game using RN that uses multiple active Animated components), using Stylesheet instead of inline styles helps performance.

My main view where around 5~10 Animated components are active, the UI FPS drops to 15~18 when I use inline styles, but if I use Stylesheet it has a 60fps with little to no stagger. Note that I had to implement this in most components especially the Animated components and its child components in order to see the improvements, I still have some inline styles lying around in other components.

When it comes to performance, your UI FPS is affected by your js activity. So reducing/optimizing JS load will help to keep your FPS perform better. In my project, some style values are computed, but they only need to be computed during the initial load. When I use inline styles, these values are computed every re-render, so using stylesheets makes more sense since there will be no recomputing. This is especially important when handling image assets.

Bottom line, use Stylesheet when you can. It will help in the long run and avoid any unnecessary updates from inline to stylesheet.