arrow icon

How is Linaria different from Emotion and Styled Components

Download your copy of the
Ultimate Guide to React Native Optimization

blog content

Need help with Performance Optimization? 
hire us
Need help with Super app development
hire us
Need help with React Native?
hire us
Need help with migration to React Native?
hire us
Our React Native EU Conference is back
register nowlearn more

Recently we released our CSS in JS library - Linaria, which does build time evaluation and extraction of CSS to static files. We’ve been asked the same question over and over again, “How is it different from emotion”.

Linaria has a lot in common with Emotion and Styled Components regarding the API. However, the way Linaria works is completely different.

In short, CSS in JS libraries such as Emotion and Styled Components parse and apply your styles when your page loads in the browser, Linaria extracts the styles to CSS files when you build your project (e.g. with webpack), and the CSS files are loaded normally.

Emotion used to have a static extraction mode, which was limited in the sense that it doesn’t support interpolations in the CSS string and can’t use many of Emotion’s features. Linaria will evaluate the interpolations such as JavaScript variables and functions in the CSS string at build time.

This approach has several advantages:

  • Improved load time because CSS and JavaScript can be loaded in parallel, unlike runtime CSS in JS libraries where the CSS is in the same bundle as JS
  • Improved runtime performance because no extra work such as parsing the CSS needs to be done at runtime
  • No style duplication between SSR’d CSS and the JavaScript bundle.
  • Since Linaria works at build time, you don’t need to have SSR setup to improve the time to first paint or for your page to work without JS

Hope this clears it up. Also, check out “Why use Linaria” which lists more differences from other CSS-in-JS libraries.

If you still have questions, please comment below.

Satyajit Sahoo
React Native and Web developer who specializes in JavaScript, TypeScript, and all things frontend related. Satya has created and maintained many open source libraries for React Native & Web such as React Navigation, React Native Paper, React Native Builder Bob, Linaria etc. Creator of React Navigation 5 and Linaria. When not coding, Satya loves cooking or playing video games.
arrow icon
MORE posts from this author

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

learn more

More posts from this category

Ensure your React components perform as intended as your app grows

Discover Reassure - our open-source library that allows you to run performance tests measuring the average rendering time of the in-app components.

business benefits

Performance Optimization

To stay competitive, you need a high-performing app. Improving React Native performance can bring your company many business and tech benefits. To learn more about it, check the page entirely dedicated to React Native Performance Optimization. Discover a real-life example of React Native optimization we performed for Aaqua, a Singaporean platform that enables global users to share their passion through groups.

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

business benefits

Why React Native?

Building an all-in-one platform can bring your company a lot of business and tech benefits like seamless UX experience, global reach, brand growth just to name a few. To learn more about the benefits of using React Native to develop super apps, check out the MoMo case study. Where we helped improve app's performance by migrating architecture to Re.Pack.

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.