Zach’s ugly mug (his face) Zach Leatherman

A Historical Reference of React Criticism

February 06, 2023 #7 Popular

There have been a number of criticisms levied at the React project over the years, some of them handled and some of them still wavering in the wind. In this post, I’ll summarize the ones that are most prominent in my memory as a way of maintaining a record (primarily for my own use but maybe you’ll find it useful too). If you have others, please send them my way!

December 2014

9.9 years ago:

Screenshot image for https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.filamentgroup.com%2Flab%2Fmv-initial-load-times%2F/opengraph//

Researching the Performance costs of JavaScript MVC Frameworks—John Bender (December 12, 2014)

To my knowledge this was the first data-backed criticism of the SPA/clientside rendering model. It showed an average React performance baseline of 1.26 seconds to first render on a mobile device over 3G, when performance guidelines recommended a goal of first render in under one second.

The React popularization of client-side rendering did not exist in a vacuum. It was happening as developers struggled to make this model of client-side React work on an increasingly diverse and demanding world-wide mobile device landscape, especially as Responsive Web Design won over m-dot architectures for most web work.

I’m reminded of Mark Zuckerberg famously admitting that Facebook bet too much on HTML5 for mobile, although I haven’t seen a connection between that 2012 quote and React’s initial release in 2013.

In the post, John states:

There are practical approaches we can already use today to reliably produce very fast rendering times, but they work best when HTML content is delivered from the server side rather than generating it solely on the client. That approach benefits many areas of user experience aside from performance alone…

The above quote seems incredibly prescient in hindsight and still (somehow) relevant to modern day React discourse as they finally begin to pivot away from create-react-app.

But notably, 8.2 years after the blog post was written, that pivot is as of now only an idea. Currently the React documentation still recommends clientside rendering:

“If you’re learning React or creating a new single-page app, use Create React App.”

It hasn’t improved with the new beta React Docs either:

“If you’re learning React, we recommend Create React App. It is the most popular way to try out React and build a new single-page, client-side application”

It is interesting that they have anointed Next.js as the official chosen full-featured framework moving forward in the Beta documentation. I’m sure it has nothing to do with Next.js 13 being the “real React 18 release”.

April 2015

9.5 years ago:

Screenshot image for https://v1.screenshot.11ty.dev/https%3A%2F%2Fwebreflection.blogspot.com%2F2015%2F04%2Fthe-dom-is-not-slow-your-abstraction-is.html/opengraph//

The DOM is NOT Slow, Your Abstraction Is—Andrea Giammarchi (April 20, 2015)

Well, it turned out that React here at least worked (not on Android 2.3, only on webOS), but it delivers the worst performance compared with underscore, paperclip, or my DOM version.

Update February 7, 2023: this entry was added.

July 2015

9.3 years ago:

Screenshot image for https://v1.screenshot.11ty.dev/https%3A%2F%2Faerotwist.com%2Fblog%2Freact-plus-performance-equals-what%2F/opengraph//

React + Performance = ?—Paul Lewis (July 3, 2015)

For mobile there's a remarkable (performance) cost to using React over not doing so, and the cost is so high as to be reasonably prohibitive.

React has significant costs, especially on mobile. React has a lot of computational work required to do all of its checks. On mobile the cost is far higher than I think is reasonable.

I really enjoyed using React, but I wouldn't personally use it on an app I'm building; I just don't think it would be fast enough.

Update February 7, 2023: this entry was added.

June 2016

8.4 years ago:

Thomas A. Powell notes that in June 2016, React’s home page was changed to remove copy touting the performance benefit of Virtual DOM with a pivot to a focus on efficiency instead.

Prior to this change it declared:

“React abstracts away the DOM, giving a simpler programming model and better performance.”—https://facebook.github.io./react/

Update February 6, 2023: this entry was added.

July 2016

8.3 years ago:

Your license to use React.js can be revoked if you compete with Facebook—Jorgé (July 16, 2016)

If you are using or considering using React in a project you might want to consult a lawyer. Because of the patent clause you are not allowed to do anything that constitutes as competing with Facebook. If you do take legal actions or in other ways challenge Facebook, your license to use React is immediately revoked. Your license is also revoked if you have any legal disputes if you have legal disputes with any other company using React.

Update February 7, 2023: this entry was added.

December 2016

7.9 years ago:

Alright, so you’re not a beginner or you’re not building an app. You know better than to fall into the Create React App pit of client-side rendering performance problems and use a React framework that uses server side rendering, right? Well, not so fast.

Screenshot image for https://v1.screenshot.11ty.dev/https%3A%2F%2Faerotwist.com%2Fblog%2Fwhen-everything-is-important-nothing-is%2F/opengraph//

🌟 When everything's important, nothing is! 🌟—Paul Lewis (December 10, 2016)

This post was a very early criticism of how Server Side Rendered frameworks using Virtual DOM still block the main thread in a pretty bad way:

SSR typically gets you a faster First Meaningful Paint. That's great for perceived performance, but for libraries / frameworks that recreate the DOM virtually, TTI seems to be pushed back, sometimes a long way. I guess the diffing of real DOM to make VDOM is more expensive than starting fresh?

The Progressive Booting section (to me) reads as the precursor to Islands architecture (August 11, 2020), with a special call in both this and the Islands architecture post to make more use of requestIdleCallback in frameworks, which as far as I could tell is not included with React 18 (with or without Suspense).

August 2017

7.2 years ago:

React’s open source license (with a patent clause) was classified by the Apache Software Foundation as a Category-X (read: problematic) license, meaning that it could not be used for Apache.org projects (July 15, 2017).

The React team at Facebook posted an explanation doubling down on a licensing choice (August 18, 2017) that had been in use since the project’s initial release in 2013.

One month after Facebook’s post, Matt Mullenweg (of WordPress) writes a blog post stating that WordPress would divest from React (September 14, 2017) in large in-progress projects Calpyso and Gutenberg.

Facebook reversed the decision (September 22, 2017) for React v16 a few days later.

The patent clause remained in place for many other open source projects at Facebook (and all prior versions of React).

Update February 7, 2023: some addition timeline context was added.

October 2017

7 years ago:

Screenshot image for https://v1.screenshot.11ty.dev/https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fissues%2F11347/opengraph//

Rob Dodson filed RFC: Plan for custom element attributes/properties in React 17, 18, 19 #11347, noting compatibility issues between Web Components and React.

Currently, React 18.2.0 passes 0/14 of the advanced tests on the Custom Elements Everywhere tests. An experimental build of React is available but it is not (and at this point may never ship?) in a stable release.


7 years ago:

The Netflix UI Engineering team tweeted:

Removing client-side React.js (but keeping it on the server) resulted in a 50% performance improvement on our landing page

which included a photo of a talk slide that read:

By getting rid of React and moving to plain JavaScript, we saw a 50% reduction in our Time to Interactive (TTI) metric.

Update March 16, 2023: This section was added.

April 2020

4.5 years ago:

Screenshot image for https://v1.screenshot.11ty.dev/https%3A%2F%2Ftimkadlec.com%2Fremembers%2F2020-04-21-the-cost-of-javascript-frameworks%2F/opengraph//

The Cost of Javascript Frameworks—Tim Kadlec (April 21, 2020)

A study of 4.3 million desktop and 5.4 million mobile URLs showed that React sites spent far more scripting related CPU time on the main thread than sites built with Angular, Vue.js, or jQuery.

…while Angular sites shipped more JavaScript than React sites, they (Angular) actually spend less time on the CPU—much less time.

September 2021

3.1 years ago:

“øJS is coming to Next 🔜”—Guillermo Rauch

I remember this tweet pretty vividly, even now! What an exciting possibility—and “soon”!

The tweet was posted on September 13, 2021, a full year before Next.js v13 shipped on October 25, 2022. Astute readers might note that Next.js v13 did not ship with øJS. The Next.js v13 bundle size was 44 kB larger than v12—about half of one React library larger, in fact.

As an aside, I’m curious how much of this had to do with miscommunicated expectations around React Server Components, given the criticisms also levied by the Hydrogen team at Shopify.

Update February 6, 2023: previously this section incorrectly stated the Remix team as the origin behind issues with server components.

Notably, 2021 Guillermo Rauch is a welcome pivot from 2013 Guillermo Rauch, confidently stating that “Single-page, JavaScript-driven apps are the future”. Though 2023 Guillermo Rauch seems to have jumped the shark 😅.

We might also remember that these frameworks are recommended by the React team on the official documentation for content sites and that Next.js, Gatsby, and Remix have long used the blog site as the quintessential starter project in their respective Getting Started documentation.

Here are a few baseline bundle sizes:

Update February 7, 2023: Added a bit of history on Single Page Applications.

October 2021

3 years ago:

Screenshot image for https://v1.screenshot.11ty.dev/https%3A%2F%2Fdev.to%2Fthis-is-learning%2Fjavascript-framework-todomvc-size-comparison-504f/opengraph//

Ryan Carniato: JavaScript Framework TodoMVC Size Comparison (October 14, 2021)

A great analysis of how different frameworks grow in relation to application size.

Preact React Solid Svelte Vue
Vendor Size 4.39 kb 36.22 kb 3.86 kb 1.85 kb 16.89 kb
Component Size 1.21 kb 1.23 kb 1.26 kb 1.88 kb 1.10 kb

(sizes shown are Brotli compressed)

Alex's goal was 5 seconds TTI on a slower device and network. For some industries like eCommerce that target should be more like 3 seconds. 70kb - 25kb = ~45kb budget here. How can a larger library like React even compete?

I do want to also call out a similar but far more comprehensive (and maintained) analysis of framework bundle sizes was done at webcomponents.dev (first published in February 2020).

February 2023

Screenshot image for https://v1.screenshot.11ty.dev/https%3A%2F%2Finfrequently.org%2F2023%2F02%2Fthe-market-for-lemons%2F/opengraph//

Alex Russell: The Market for Lemons (February 4, 2023)

This post includes a breathtaking array of receipts, especially in the Sandy Foundations section. I won’t attempt to summarize them here, but it’s definitely worth a read.


An analysis of Core Web Vitals across 9.3 million web sites as of February 6, 2023 shows that Core Web Vitals for both React and Next.js shows that both perform worse than the aggregation of all other sites in the archive for both mobile and desktop.

Currently only 26% of sites using Next.js have good Core Web Vitals. This is lower than React at-large (32.81%) and the entirety of all sites in the data set (39.37%).

August 2023

Screenshot image for https://v1.screenshot.11ty.dev/https%3A%2F%2Fjoshcollinsworth.com%2Fblog%2Fantiquated-react/opengraph//

Things you forgot (or never knew) because of React—Josh Collinsworth (August 4, 2023)

October 2023

Screenshot image for https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.epicweb.dev%2Fwhy-i-wont-use-nextjs/opengraph//

Why I Won’t Use Next.js—Kent C. Dodds

Kent lists a host of problems with Vercel’s Next.js in Why I Won’t Use Next.js, and many of those criticisms aren’t limited to Next.js but levied more broadly at the React ecosystem.

Addendum:

Update February 7, 2023: Added resources from Timo Tijhof and Thomas Michael Semmler!

CSS-in-JS

In this post I didn’t mention the rise and fall of CSS-in-JS—an approach created by the React team in November 2014 and further popularized in the React community before quietly walking it back almost 7 years later).

Update February 6, 2023: a thank you to Mayank who clarified some history on CSS-in-JS, and you can read more on their blog post.


< Newer
'Could not find Chromium' with Puppeteer 19
Older >
GitHub’s Open Source Friday: WebC, The Web Components Framework

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

117 Reposts

IndieWeb Avatar for https://www.alvinashcraft.comBen SevenAntonio SarcevicTimo TijhofPlacebo DomingoBud Parr, enthusiastAlex ZakhlestinTyler StickaDanny BlueDariusBen DelarreMatthias OttSascha DiercksschneyraArri Blais :verified_trans:WebPerformance ReportKeith CirkelIndieWeb Avatar for https://lobste.rsFynn BeckerdanwestbrookEric Eggert⊥ᵒᵚ Cᵸᵎᶺᵋᶫ∸ᵒᵘ ☑️Nicolas HoizeyRupert 'fildon' McKayJuanVadim MakeevJason Lawton :wordpress:fahruperrohunterLobstersIndieWeb Avatar for https://blog.cwa.me.ukysbrekerThomas SchoffelenTrey PiepmeierDavid L. Herringakazzop@pouet.chapril.orgMartin BPez PengellyJason GrigsbyBenny Powers 🇨🇦️🇮🇱️Steve WoodsonBrian RinaldiStuart Robsonmdh@infosec.exchangemeduz'Bruce B AndersonHrefna (DHC)Kevin PennekampEvanHiddeBryce WrayMatt WilcoxMatt Hogg 🐽Thomas BroyerJames SecondeIndieWeb Avatar for https://polytechnic.co.ukThomasorusBruce LawsonDavid BissetVinta KnowledgeAnthony Hortin 🇺🇦React Norway 🗓 June 16, 2023RunJS ❤️ JavaScriptBasixLeechaelIndieWeb Avatar for https://show-hn.comSuwigya RathoreFresh Frontend LinksFrontend DogmaFullStack BulletinMarcin KumorekazuazukemarJoulseIndieWeb Avatar for https://logicface.co.ukIndieWeb Avatar for https://show-hn.comIndieWeb Avatar for https://show-hn.comIndieWeb Avatar for https://hacker-new.co.ukIndieWeb Avatar for https://www.spicyweb.devIndieWeb Avatar for https://animehubinsider.comIndieWeb Avatar for https://prodsens.liveIndieWeb Avatar for https://www.mayank.coIndieWeb Avatar for https://www.spicyweb.devIndieWeb Avatar for https://reganthapa.com.npChris Ferdinandi ⚓️Alex Michael Berry ????????Kevin PennekampJens TangermannIdo RosenthalClark GunnEoin KellyChris Knightbrussolo.igor ????️‍????Brian DavidJoe GaffeyAaron In IowaBoris SchapiraSia KaramalegosMykal MachonAyo AycoTixie Salander ????IndieWeb Avatar for https://sfndesign.caIndieWeb Avatar for https://curtismchale.caIndieWeb Avatar for https://cloudfour.comIndieWeb Avatar for https://news.aitime.spaceIndieWeb Avatar for https://kazanculture.comIndieWeb Avatar for https://www.recentic.netIndieWeb Avatar for https://timotijhof.netIndieWeb Avatar for https://redmonk.combeyond tellerrandIndieWeb Avatar for https://hello2internet.comIndieWeb Avatar for https://blog.atolcd.comIndieWeb Avatar for https://redmonk.comIndieWeb Avatar for http://www.recentic.netIndieWeb Avatar for https://news.netbalaban.net

94 Likes

Hawk TicehurstAlex Michael Berry ????????Alex MTimo TijhofMottokrosh@mastodon.socialscreenspanAnnekeZwiebelDan JacobGene ChuphaeAlex Russellmraerinobrussolo.igor ????️‍????Ben HollisHiddemidka???? Attila GondaJoe GaffeyBrantley HarrisSia KaramalegosBoris SchapiraTris????️Web HarwardAKMichael Gale :maybe_verified:meduz'Clark GunnMykal MachonChris HayesCory Rylant (Redrum) besedaJeffDave ???? :cursor_pointer:Nathan KnowlerKees de KooterNathan Bottomleyelle mundyBen DelarreAntonio SarcevicTimo TijhofArnaud LimbourgFynn BeckerAlan DávalosTrey PiepmeierPaul MasonAdam StoddardMiguel :verified:David L. HerringBud Parr, enthusiastZack Tollmanakazzop@pouet.chapril.orgwestbrookEric EggertSteve WoodsonDanny BlueTyler StickaDiego BarrosDariusKarl StolleyRupert 'fildon' McKayChris ColemanSara Joy ✨Simon GraySeb⛧Satanist⛧Fernando Mateusslimepsychic@weirder.earth"sam breed"Stephentambourineman@mastodon.cloudGreen screen backgroundslashPhil SherryOndřej PokornýDave RupertRhian van EschJoe LanmanColinautschneyraJohn De CostaEvanSascha DiercksCACHΞFLOWΞBryce WrayJason Lawton :wordpress:Rocky NeurockVille V. VanninenAdrianna TanLachlan CampbellArri Blais :verified_trans:Frédéric BonnetPaul RosenThomas BroyerAra
39 Comments
  1. Hidde

    @zachleat thanks for this post, I find seeing it all in a timeline super helpful!

  2. Zach Leatherman :11ty:

    @hdv I learned it from @Jayhoffmann!! (you’re very welcome)

  3. ThomasAPowell

    @zachleat June 2016 seems like when they knew, but did very little to dispell conventional dev beliefs.

  4. Zach Leatherman :11ty:

    @thomasapowell dang, good find. Any mention of performance on that right version?

  5. Zach Leatherman :11ty:

    @slightlyoff @thomasapowell Thanks y’all, I added this to the post!

  6. Mayank

    @zachleat since you briefly mentioned CSS-in-JS at the end, i should point out that it was the react team that first coined the term, convincing everyone that it's actually fine. and so the ecosystem went all in on runtime CSS-in-JS 🙃it didn't take long for facebook to i… Truncated

  7. Zach Leatherman :11ty:

    @hi_mayank whoa, I did _not_ know that—are there any references I can read?

  8. Mayank

    @zachleat the original talk where they introduced it: https://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.htmltheir hard-to-find new recommendation (see "Future" section): https://github.com/reactwg/react-18/discussions/110i also wrote about it 😄 https://blog… Truncated

  9. Zach Leatherman :11ty:

    @hi_mayank amazing, I appreciate it!

  10. passle

    @zachleat Reacts custom elements story is a sad joke

  11. Zach Leatherman :11ty:

    @passle yeah, hard to argue with that…

  12. Zach Leatherman :11ty:

    @hi_mayank I added these links to the post, thank you!

  13. Mayank

    @zachleat yay! i love that there are now so many receipts of what the react team is doing/not doing

  14. Kees de Kooter

    @zachleat I recall this blogpost by one of the prominent React committers. Admitting that he does not know CSS.I was and still am amazed how you can build a frontend library without such knowledge.And it might explain the css mess around React.https://overreacted.io/things-i-dont… Truncated

  15. Zach Leatherman :11ty:

    @kdekooter I do love the vulnerability of that blog post, for what it’s worth!

  16. Brian Rinaldi

    @zachleat Wow those numbers for Next.js you cite at the end are abysmal. I am feeling like opinion may be shifting. As someone who has never really bought into React/Next (I've used it and written about it entirely out of necessity), it's nice to see.

  17. frehner

    @zachleat one minor correction - the Hydrogen team is the one that made that statement about RSC, not the Remix team. We both work at Shopify, and work together frequently as well, but we are different teams and people.

  18. Zach Leatherman :11ty:

    @remotesynth the stats make the marketing hard to stomach, that’s for sure.

  19. Zach Leatherman :11ty:

    @frehner oh, you’re absolutely right. I’ll fix that immediately.

  20. Danny Blue

    @passle @zachleat I am still seeing arguments that the synthetic event system is a good idea. I just fucking can't.

  21. James Garbutt

    @zachleat Can't believe Rob's RFC was 5+ years ago. I feel like one or more people in the react team must hate custom elements and the DOM just as much as they hate classes :D

  22. Zach Leatherman :11ty:

    @43081j I honestly think it’s just that they have zero incentive to do it and it’s a difficult breaking change

  23. James Garbutt

    @zachleat It's very possible. The majority of their audience doesn't need to care. So time is better spent elsewhere. Still a shame though, especially to see the efforts by people like Rob D wasted. Many of the community would happily help push things like that along

  24. Timo Tijhof

    @zachleat Some pages in my secret "React" bookmarks folder:* http://webreflection.blogspot.com/2015/04/the-dom-is-not-slow-your-abstraction-is.html?m=1 * https://www.swyx.io/svelte-static * https://www.youtube.com/watch?v=uCHZJy2n8Qs 2017: VDOM is DX over UX. * https://em… Truncated

  25. Nikolaj Nyboe

    @zachleat got it, thanks for that extra nuance 👍

  26. Tom MacWright

    in the universe of essays (from people i like and usually agree with!) are things like zachleat.com/web/react-crit… and infrequently.org/2023/02/the-ma… / in the 'more server rendering', there's next.js, react server components, and remix. for accessibility, basically… Truncated

  27. Matthieu M

    ne fresque historique des différentes critiques apportées à React et comment il a évolué face à celles-ci zachleat.com/web/react-crit…

  28. Mayank

    @zachleat it's just landing page though. their actual product probably uses tons of react

  29. Zach Leatherman :11ty:

    @hi_mayank Yeah, for sure. Another data point for the pile though.

  30. @hi_mayank @zachleat I actually thought I remembered hearing that Netflix moved away from React to vanilla JS for their entire app, but maybe I’m misremembering…

  31. Chris Hayes

    @zachleat @kentcdodds Next is changing quite a bit. Think they got a little scared of Remix.Not sure Remix is really the lesser of 2 evils when it's owned by Shopify (though Shopify DX in general is pretty great). I suppose that's not the focus here.But, if we're go… Truncated

  32. Zach Leatherman

    @chris_hayes the work is done—it’s shipping soon!https://fediverse.zachleat.com/@zachleat/111268294523729861

  33. Tomb Rotdolph :thomas:

    @zachleat while I agree with the very high level sentiment, it's a bit beyond the pale for Kent to say that React wins on The Web Platform, Independence, Too Much Magic, Complexity, and Capability when he's spent years trashing native components at every opportunity.As us… Truncated

  34. Zach Leatherman

    @rockerest I’ll keep saying this but I’m okay with folks learning lessons we’ve known for a long time—we need allies and not “I told you so’s!”

  35. Tomb Rotdolph :thomas:

    @zachleat fair enough. I'll keep watching!

  36. Zach Leatherman

    @chris_hayes no, that shouldn’t be a requirement. CJS plugins should work as is. The one exception there is if you have a CJS config file in 3.0 and you want to import a bundled plugin from Eleventy core, you will need to use dynamic import() in an async config to do this.

  37. Chris Hayes

    @zachleat that's helpful, thank you. The lightweight 11ty + WebC flow has me excited.

  38. Brian David

    @zachleat @kentcdodds "Overrides global fetch." WHHHHHHaaaaaaaaat?

  39. Zach Leatherman

    @bcdavid @kentcdodds mmmmmhmmmmmmmmm

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)