Тёмный

New York Times Sees 30% Perf Win By Switching To React...18? 

Theo - t3․gg
Подписаться 343 тыс.
Просмотров 40 тыс.
50% 1

This article is a fascinating deep dive in the pain and performance wins of React 18. Thank you to New York Times for making such a solid write up, genuinely super impressed.
SOURCE open.nytimes.c...
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit 🙏

Опубликовано:

 

15 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 103   
@AttilaButurla
@AttilaButurla 2 месяца назад
Misleading title. Upgrading from an older version of React to React 18 improved performance.
@Danielo515
@Danielo515 2 месяца назад
Indeed
@lpite9171
@lpite9171 2 месяца назад
As always?)
@joegaffney8006
@joegaffney8006 2 месяца назад
To be fair as it includes the version so you can tell its an upgrade. If it just said React it would of implied the switch of framework.
@azazinlove7514
@azazinlove7514 2 месяца назад
Theo himself is confusing, watching Theo's video and listening to his opinion divide everything by 100.
@gadgetboyplaysmc
@gadgetboyplaysmc 2 месяца назад
classic theo the clickbaiter
@JLarky
@JLarky 2 месяца назад
Typical enterprise: React 19 is out, time to upgrade to React 18
@Fe22234
@Fe22234 2 месяца назад
Yeah nothing can go wrong getting the latest as soon as you can.
@techworld3255
@techworld3255 2 месяца назад
React 19 is out, time to upgrade to 18 from 0.8
@Mischu708
@Mischu708 2 месяца назад
It’s like buying phones. New iphone comes out so i can afford an iphone 14 😂
@tuananhdo1870
@tuananhdo1870 2 месяца назад
No, when new york times upgrade to react 18, it was last winter and 18 is the lastest version. This is a bad joke
@statuschannel8572
@statuschannel8572 2 месяца назад
more experience you get with software more you realize you can avoid lot of headache by developing in the 2nd stable version. i haven't touched Next 13 or 14. still using 12. and most Nextjs devs would understand how much pain i excaped by that
@av-explorations
@av-explorations 2 месяца назад
should've just rewritten the whole app in svelte...
@statuschannel8572
@statuschannel8572 2 месяца назад
no company like to depend/believe in their ex employees!
@JLarky
@JLarky 2 месяца назад
@@av-explorations which one? Svelte 2, 3, or 5?
@NabekenProG87
@NabekenProG87 2 месяца назад
​​@@JLarkyReact 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18 or 19?
@wobsoriano
@wobsoriano 2 месяца назад
@@JLarky svelte mentioned and youre here ofc!
@aquaductape
@aquaductape 2 месяца назад
better yet SolidJS, svelte doesn't have jsx
@SeaWaves8
@SeaWaves8 2 месяца назад
In both React 17 and 18 the console.log would run once for all the three state changes. the batching is done internally.
@fengziya
@fengziya 2 месяца назад
just wanted to note - setImmediate is a node-only function if i remembered correctly
@IronMaidzen
@IronMaidzen 2 месяца назад
It was an IE / "Pre Chromium Edge" Function used exactly for the use case to execute after inital processing. Which was, in old IE fashion, completely useless because it did the same as setTimeout(..., 0) on Clientside (which is why it did not get adapted by FF and Chromium). Node.js adapted the function beacuse it made more sense on server side.
@fengziya
@fengziya 2 месяца назад
@@IronMaidzen Interesting, thanks for the info!
@nexovec
@nexovec 2 месяца назад
If SEO is the most important thing for you, why on earth would you use react? To make the most living hell situation for the web crawlers you possibly could?
@vaggelis_best
@vaggelis_best 2 месяца назад
Well, they still want to stay on 'the cutting edge of technology☝️🤓' and mainly because they don't just show text and imgs like conventional newspapers, they're one step above (that's their value proposition) by showing the visualizations Theo mentions. Also parts of their systems are blocked behind a subscription which undoubtably requires user state management.
@nexovec
@nexovec 2 месяца назад
@@vaggelis_best So your assumption that I sincerely hope is incorrect is that they do USER STATE MANAGEMENT ON THE FRONTEND?
@rortan
@rortan 2 месяца назад
just prerender
@PanosPitsi
@PanosPitsi 2 месяца назад
He is not using react he serves static html files from a cdn. It’s literally the dream scenario for any crawler
@RA-xx4mz
@RA-xx4mz 2 месяца назад
An underrated feature of Theo’s videos is that he doesn’t pollute his videos with random reaction edits every dozen seconds. 👌🏽
@Fanaro
@Fanaro 2 месяца назад
Maybe make a video about how Medium being such a pile of garbage with terrible design. And those god-awful ever-loading cheap-looking Github snippets or images they just can seem to pre-load even if you pay for memberships.
@joshuadovey5055
@joshuadovey5055 2 месяца назад
Pretty sure you've made a video about this, but I have forgot. What extension are you using that generates code suggestions on every key stroke? I use Copilot but it's so slow at generating suggestions and sometimes doesn't even offer any suggestions.
@lucascoutinho6168
@lucascoutinho6168 2 месяца назад
i was having the same question yesterday, is called supermaven.
@t3dotgg
@t3dotgg 2 месяца назад
Supermaven! It's so good
@joshuadovey5055
@joshuadovey5055 2 месяца назад
@@t3dotggI'll take a look, cheers!
@malcolmrodrigues911
@malcolmrodrigues911 2 месяца назад
Codeium is also great extension for this
@developer217
@developer217 2 месяца назад
@@malcolmrodrigues911 not as fast as Supermaven
@the_siili
@the_siili 2 месяца назад
Why am I watching it while being full time flutter mobile dev?
@justafreak15able
@justafreak15able 2 месяца назад
Because you're not a monotone developer and you learn new things 😂
@alexartigas9181
@alexartigas9181 2 месяца назад
You're not alone
@statuschannel8572
@statuschannel8572 2 месяца назад
so what? flutter is not a solution to everything, whether you like it or not you'll end up working in other popular libraries in your career
@alexartigas9181
@alexartigas9181 2 месяца назад
@@statuschannel8572 no one said anything about that. I, for example, am a senior frontend developer and I've used all web frameworks at this point. It's just funny that if you're a dedicated full time flutter mobile engineer at this moment, you're watching a video about performance, server rendering and SEO when your daily basis is about client rendering and no crawlers involved 🤷‍♂
@Godalming123
@Godalming123 2 месяца назад
Wouldn't it be much easier to use astro for all of this? Especially since switching pages in astro could happen nearly instantly without a reload.
@dusanradovanovic8309
@dusanradovanovic8309 2 месяца назад
16:30 I don't think this is correct. Browsers run appended script tags. There might be something in a framework/library that stops script tags from injecting, or maybe something in browser security context (different domains), but browsers run js in appended script tags. I just did this in dev console and it worked var e = document.createElement('script'); e.text = 'console.log("aaa")'; document.getElementsByTagName('head')[0].appendChild(e);
@riendlyf
@riendlyf 2 месяца назад
Good catch!
@marketfinds
@marketfinds 2 месяца назад
Nice article. thanks for going through. So they tested or observed performance after it went into production? Also looks like a lot of Browser script hacks teetering on 20 year Browser technology 😁
@archmad
@archmad 2 месяца назад
I had the same exactly issue on script dont run. What i did is just catch all scripts, dont include it, save it somewhere, while retaining the element but adds an id on that element keyvalued with the script. Load the script that is associated on that id only when the page is loaded and found the id.
@Z4KIUS
@Z4KIUS 2 месяца назад
in general news site doesn't need SPA at all, though if they often create heavily interactive articles that may make some sense
@SirM0linarius
@SirM0linarius 2 месяца назад
Yeah i am pretty sure they use classic server side rendering for their website in general, and only build an spa for an additional interactive graph in some articles.
@limp6986
@limp6986 2 месяца назад
Amazing... React catching up to other frameworks warrants this reaction?
@pawelparadysz
@pawelparadysz 2 месяца назад
Why don't you have captions on your video? It'd take like 3 extra minutes to run whisper, fix svelte and paste it.
@jwoods9659
@jwoods9659 2 месяца назад
Dude it's the NewYork times. Mostly text and images. They could have just used Astro. Frontend development is all about React. I'm going to the backend.
@owenwexler7214
@owenwexler7214 2 месяца назад
they use a lot of crazy interactive visualizations and I can see why React would be needed for that but still they could use Astro for 90% of the page's content and React or Preact where needed.
@Fe22234
@Fe22234 2 месяца назад
Hey look it is a guy on the Internet that does not know what he is talking about.
@jwoods9659
@jwoods9659 2 месяца назад
@@owenwexler7214 And Svelte still could have handled everything needed. I'm sort of over frontend.
@veloxian
@veloxian 2 месяца назад
@@Fe22234 Nah. I work on similar sites. There's absolutely no reason any of it needs React. Even the occasional interactive element is likely done better with a little vanilla js. The only real thing that justifies it are these heavily interactive embeds, but those already render independently of the main page anyway.
@jwoods9659
@jwoods9659 2 месяца назад
@@veloxian I think frontend devs are going React their way out of jobs. With everything going back to serverside I'm blown away with what you can do from the backend. Not only build that but also your frontend, htmx, alpine, built in templating language for Temple and such.
@Spiker985Studios
@Spiker985Studios 2 месяца назад
Man, I saw an exec in there, and I really hope they're not actually using exec in their production code because that's a big cross site scripting vulnerability
@quinndirks5653
@quinndirks5653 2 месяца назад
20:14 redeclaration of global variables is possible with var, or by setting the global variable on the window object directly, so... ??
@bigMax1337
@bigMax1337 2 месяца назад
I remember amp and now i feel old
@HugoPineda83
@HugoPineda83 2 месяца назад
the batched setState also happened in react 17. What did I miss?
@gcash49
@gcash49 2 месяца назад
it batches in a lot more scenarios now. in react 17 it only batched in like certain scenarios. if I recall i think it was like event handlers that were not async?
@rostcraft
@rostcraft 2 месяца назад
Also they are migrating from React 16, I think.
@chris7263
@chris7263 2 месяца назад
Someone tell the Economist, their app is screaming garbage.
@ErazerPT
@ErazerPT 2 месяца назад
Batch updates... what a novel concept...
@gageracer
@gageracer 2 месяца назад
This all makes me think, what's the technical reason not to just make the whole site in Svelte if they are so performance conscious? Besides programmers not wanting to, it looks like the effort they put to make this whole working and luckily getting 30% performance shows how stupid React is with it's actual model of "Re-render unless otherwise". It should be called Reload not React.
@stasoline
@stasoline 2 месяца назад
It's a much larger job to rewrite the entire site with Svelte instead of bumping the React dependency and fixing a few embed issues.
@gageracer
@gageracer 2 месяца назад
@@stasoline so no technical reason? That's just it will take more time.
@J1Jordy
@J1Jordy 2 месяца назад
All this effort to show the paywall 30% faster.
@rdvansloten
@rdvansloten 2 месяца назад
Chatter @ 1:52 confusing terabytes with terabits, lol
@anwiseru9064
@anwiseru9064 2 месяца назад
thats pretty cool
@cbaesemanai
@cbaesemanai 2 месяца назад
I really wish I could like react but it just feels so nasty.
@chrislanejones
@chrislanejones 2 месяца назад
Enzyme is also a horrible name for a React library.
@filipsysak6672
@filipsysak6672 2 месяца назад
7 views in 1 minute? Bro fell off
@marcosandre3986
@marcosandre3986 2 месяца назад
7 likes in 8 minute?
@4v4
@4v4 2 месяца назад
He made me dislike him
@iRemmi
@iRemmi 2 месяца назад
@@4v4how
@hwapyongedouard
@hwapyongedouard 2 месяца назад
just asking does theo have kids and wife 😂😂😂😂
@Brunoenribeiro
@Brunoenribeiro 2 месяца назад
why are we still here developing frontend apps? Just to suffer?
@CoIdestMoments
@CoIdestMoments 2 месяца назад
Why not next js ?
@GoldmediaSubscribeme
@GoldmediaSubscribeme 2 месяца назад
Next js is a framework and react is just a liberary that they are using in most parts of their site , I think the main reason is that with thier custom infra it will be like next to impossible to to migrate rather than rewrite will be easier
@imfilou
@imfilou 2 месяца назад
prabably because their infrastructure was older than nextjs. Updating your current infra is often simpler than migrating.
@jonothan
@jonothan 2 месяца назад
you'd love AMP for email :D
@supremebeme
@supremebeme 2 месяца назад
*i member gif* AMP
@ThomasMonk1
@ThomasMonk1 2 месяца назад
I hated amp!!
@FatalKilz
@FatalKilz 2 месяца назад
Only came on to this vid to say “ your a washed up reaction RU-vidr who has to steal content to stay relevant and only gets 30k views a vid” souls familiar Theo
@FatalKilz
@FatalKilz 2 месяца назад
Also gonna call it now he gonna be the next dr disrespect ifykyk. Only pdf file got those mustache’s
Далее
React's most dangerous feature
26:37
Просмотров 58 тыс.
Собираю Маню к осени ✨
00:48
Просмотров 626 тыс.
98% Cloud Cost Saved By Writing Our Own Database
21:45
Просмотров 389 тыс.
Linus Torvalds: Speaks on Hype and the Future of AI
9:02
Stop FAKE USERS | Real World Laravel
4:11
Просмотров 2 тыс.
BREAKING: *.io domains might disappear soon
16:36
Просмотров 90 тыс.
Every Framework Sucks Now
24:11
Просмотров 138 тыс.