CSS vs CSS-in-JS performance

This page summarizes the projects mentioned and recommended in the original post on /r/reactjs

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • linaria

    Zero-runtime CSS in JS library

  • I never tested myself tbh, but that’s a surprising result as on production you only have plain old CSS https://github.com/callstack/linaria/blob/master/docs/HOW_IT_WORKS.md The styled syntax should be extracted the same way as the css helpers. I’m not sure if under some condition the styles get inlined? Perhaps on dev env?

  • react-18

    Workgroup for React 18 release.

  • In React 18 and onwards runtime css-in-js libs will have significant performance issues for concurrent rendering, recomputing inline styles repeatedly and redundantly; https://github.com/reactwg/react-18/discussions/110 . Facebook have no real interest into fixing this I believe (I assume it would be hard with unwanted trade-offs). Facebook themselves use a buildtime css-in-js lib(not open source).

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • daedalOS

    Desktop environment in the browser

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts