- Unistyles 1.x: single theme, breakpoints
- Unistyles 2.x: single theme, breakpoints
Benchamarks
In this guide, I will try to explain what you can expect from Unistyles and the potential render penalty when using it in your project.
As developers, we appreciate powerful libraries that address all our needs in terms of syntax, scalability, and cross-platform support. Unistyles was designed to be the fastest styling solution on the market. Before we delve further, it’s important to note that this library is not a UI Kit. It provides low-level functionality for developers who either want full control of styling in their commercial projects or for library authors to build UI Kits on top of it.
It would be inappropriate to compare the rendering performance of Unistyles with feature-rich UI Kits that are popular in the React Native ecosystem. Therefore, I have decided to compare it only to StyleSheet and Unistyles 1.x.
It’s also worth mentioning that there won’t be a faster way than passing your objects to StyleSheet.create. Unfortunately, the functionalities of StyleSheet are limited. Building a fully-featured, cross-platform app without some additional help is challenging.
Startup time
Rendering 100 views
- Unistyles 1.x: single theme, breakpoints
- Unistyles 2.x: single theme, breakpoints
Rendering 100 views in both versions of Unistyles is comparable, and it’s hard to measure the difference.
Rendering 1000 views with all features
- Unistyles 1.x: media queries, breakpoints, theme
- Unistyles 2.x: media queries (mq), breakpoints, variants, registered 3 themes
In the final benchmark, where 1000 views are rendered, Unistyles 2.x outperforms its predecessor, being ~25% faster than version 1.x. This demonstrates that Unistyles 2.x excels in handling complex layouts, showcasing its strength in more demanding scenarios. Moreover, it offers better overall performance coupled with an enhanced developer experience (DX) and more features, making it a more efficient and user-friendly option for complex projects.