So it looks like an interesting project to learn the component lifecycle and some React internals, but if you need to make your react apps faster you should probably use the provided profiling tools.
Is using React always bad for the user or are there any examples out there, not behind a login, that show a good usecase for React?
My team have just reimplemented a UI in React that was previously built using static pages progressively enhanced using JS. And you know what? It’s faster, easier to use, more accessible, looks better, and well-tested (though unfortunately I can’t show it off, because it’s a commercial product).
I would guess you are just conflating bad UI decisions like Reddit’s with the fact that React is now popular for building UIs.
SPAs are basically PowerPoint of web development.
The most common reason for bloat is people trying to make a site a single page app when it isn't necessary. You can do that with React, but you can also do it with Angular or Ember or plain JS if you're a masochist.
Do you mean visually? You can usually identify which SPA a site was built with by looking at the live DOM for a couple of seconds.
Anyways, I'm a huge fan and supporter of React.
However, sadly, you can tell sites that use React due to a few bugs.
The most noticeable is/was funnyness with input box focus and state. Facebook's embedded Messenger on web always bugs out on me by not accepting the text im typing.
The reason they're shitty is because they're heavier weight and "mobile first" usually comes with a certain amount of tradeoffs for other devices. React in and of itself as a means of managing data flow is very elegant IMO.
It just happens that if you tell any random group of engineers to do a full rewrite, they're going to settle on whatever is currently popular.
> every time a site gets reimplemented in react, it gets worse
And nobody came up with a counterexample yet.
_That_ is an observation.
You stated a fact, which you derived from your observations.
Alas, there's a login.
I'm sure there are countless good examples in this list: https://github.com/facebook/react/wiki/Sites-Using-React
But React and other SPA libraries will always excel more for more complex UIs, those sorts of things tend to be behind logins.
Even from a warm cache, Twitter Lite takes longer to display your timeline compared to desktop Twitter. Compared to the legacy mobile twitter site, the PWA version is 15x slower at showing your timeline 
And this is all the while ignoring the UX annoyances of the PWA version. When loading the timeline, you're presented with about three different loaders, all flashing about the screen.
Of course I know nothing about the complexities of Twitter internally and technically, but I don't understand how they managed to make it slower than the Desktop Twitter, and claim that they built a better experience when they clearly haven't.
Edit: I just did a tiny bit of by-the-eye comparisons between Desktop Twitter and Twitter Lite, and loading Notifications seems a bit faster on Twitter Lite. Loading Profile might be the tiniest bit faster on Twitter Lite, but I suspect there's a lot of DOM jank that slows displaying the next page. Showing DMs is slower on Twitter Lite compared to Desktop Twitter.
But even so, what does this have to do with the PWAs that Google+Twitter evangelise? My understanding is that PWAs are all about speeding up the warm-cache 'first load' , and once that's loaded, there's not really much that the PWA technologies will do for you. Both Desktop Twitter and Twitter Lite are Single Page Apps that fetch views from API calls - there's nothing inherently different about Twitter Lite's approach that will make it faster at that compared to Desktop.
: 'First load' seems to be the wrong name to call this, but unsure of a better, more concise phrase.
It’s not at all clear this is true. Does explore get a lot of traffic? Comments? Maybe interactions are more valuebale than pageviews?
What if I’m in the elevator, and I want to check my twitter feed?
Obviously I know none of these things, but those are assumptions I wouldn’t make easily.
They are, to Twitter. Twitter is driven by engagement, not by user needs.
The timeline isn't a single page, it effectively scrolls in infinitely. And maybe it's just me, but as I read Twitter I very frequently tap on a tweet to see expended content, the bio of who wrote it, and so on.
Maybe I'm the anomaly! But you know who'd know? Twitter. They'll have a huge analytic dataset telling them exactly how people interact with their site. Maybe they tailored Twitter Lite to that?
Time and time again on Hacker News you see people assess a project with a base assumption that the creators are basically idiots. Maybe give the Twitter devs the benefit of the doubt about how they prioritised features.
They claim that it's a faster site because of PWA, but the site is slower where all the PWA technologies would help out. Where there are speed improvements, it's got nothing to do with service workers.
It loads reasonably fast, and that's the only thing that's good about it. As a representative of a good React site, it is not.
AirBnB: I love AirBnBs service, but I totally hate the UI. It's slow and clunky and gets into the way like nothing else. A single page of a room loads over 5MB of data, scrollinig is laggy, everything feels just terrible.
> AirBnB ...
Maybe not the best example. I think they still have a lot of legacy cruft they need to fix. I still think their homepage/search UX is pretty good. And like someone else said, it's not like 'React' is the cause of slowness.
For example the search experience: I type something and before the typeaheads show up there is a loding bar on top of them. And when I hit enter, I get a loading spinner in the center of the screen.
Another example: When I click on a tweet and then click the back button. The page where I came from could be shown instantly. Instead I get some type of fade-in effect on some elements.
Etc etc. The whole experience feels terrible clunky on mobile.twitter.com.
Compare that to Googles search for example, where everything feels instant. Typeaheads, result pages ... when I click through to a result and hit the back button - I'm instantly at the same result page where I was before.
Again, this is a really bad generalisation you're making. It is ludicrous to attribute the types of slowness you're talking about to React.
> Compare that to Googles search for example
Do you think it's fair to compare anyone's search to Google's?
Here's some counter-evidence though - https://reactjs.org - that site is built with React and everything is instant.
Also, my own React apps perform instantly and that's because I didn't put in a shitload of JS to do things like track your mouse pointer and do other types of analytics like Twitter probably does.
In the 'Tutorial' section, everytime I click on an entry on the right, the screen at first jumps up for a fraction of a second before jumping down again.
I just looked at it on like four different devices and didn’t have any problem. It works perfectly for me on Windows 10 with Chrome, Mac High Sierra/Chrome and iOS 11 / Safari iPad and iPhone.
If you don’t believe me, I will post a screen cast on imgur if you’d like.
You can see the jumping on webpagetest.org:
With a slow connection, on the initial load the first jump happens at 6s and another one at 8.5s.
When I click on one of the links, it happens much faster because everything is cached. But I can still see the jump everytime I click a link to a new section in the tutorial.
I don't think the type of browser plays a role here. I get the glitches on Chrome and Firefox. And testing it on browserling.com shows that they also happen on Internet Explorer.