Breaking down React "head" drama

[@chinesesparrows]

So i learned React doesnt give head

[@samfelton5009]

😭

[@Yours--Truly]

Did you want it to? 👀

[@alibarznji2000]

Deal breaker for me

[@plasmatch8]

This is the optimal video title

[@chinesesparrows]

​@@Yours--Trulybeing unable to push and pop the DOMinatrix is such a tease

[@martinlesko1521]

wake up babe, another react leaky abstraction has dropped

[@zach4216]

wake up babe another wake up babe comment was just posted on a react leaky abstraction video!

[@NabekenProG87]

actual anarchy

[@felixisaac]

the NFL making react-helmet is crazy

[@danvilela]

can't play "handball" without a helmet

[@re.liable]

ikr i was also surprised when i first found out about it. similarly i also surprised about automattic owning(?) mongoose (mongodb orm) and wordpress

[@asdprogram]

alternative title: The React "head" situation is crazy 💀

[@Nyxar-2077]

Commentary channels be like:

[@abcabc-ur3bf]

React is crazy 🤡

[@last_fanboy_of_golb]

@@abcabc-ur3bf React is mentally deranged

[@ridass.7137]

the react head situation just got worse

[@alexandrepereira6522]

I'm so glad Vercel stopped sponsoring Theo. We get cool scene ads, new great sponsors, and less restrictive takes (even if I personally believe that Theo was already doing his best).

[@KentCDodds-vids]

> new great sponsors 😊

[@SiteStudio]

There's never been a wheel React didn't want to reinvent.

[@Joshua.Developer]

It's a joke i try my best to avoid it.

[@T1Oracle]

But it's the same wheel but made in a different collection of nearly identical libraries.

[@alanschmitt9865]

I feel like the whole runtime of this could have been spent going “huh??” at react-helmet’s maintainer

[@BellCube]

My biggest concerns: * Breaking developer expectations. I don't expect my tags to go to the head if I write them 8 divs into the body. If my code is gping to be broken, at least break it in the way I'd expect. * Unobvious breaking change. While it's bad practice to have tags sprinkled throughout your components, it's also worth noting that anyone who did that will now have their code silently broken when they update. No compiler errors to be seen. * This could be implemented with a simple "react-hoisted" prop to control this behavior, but it isn't. It's currently implicit. Make it explicit. We're getting to the point where we need a react config.

[@theshy6717]

I started with react and moved to svelte and occasionally I write react to help my dad, seeing react with issues similar to these really makes me question why react became dominant to begin with these issues are so straight forward you would think that they weren't going to be an issue it shocks me how bad it is

[@naughtiousmaximus7853]

React was innovation in the past. The problem is that no one comparable came to compete with React while establishing itself, once other competitors started to appear React was entrenched and became IBM of frontend.

[@chinesesparrows]

When there's no viable alternative the most widely used option becomes bloated trying to improve and there sometimes will be gaps on "audience/dev use case"

[@infantfrontender6131]

Don't forget that React is just a library and it handles too many things, like React Native

[@emilz0r]

How are you helping your dad writing React?

[@last_fanboy_of_golb]

funny thing is Vue was released less than a year after React, but 10 years have gone by and React is still hogging all that job posts.

[@drewmorrison2303]

I honestly love the ad section of your videos now! I hope you’re making way more money!

[@ReactTipsWithBrooks]

This is the first video I've ever watched for the paid sponsor's ad

[@timbauer399]

Ok, I LOVE Kent C Dodds and his products. He's just such a great guy in general. Super thrilled to see his stuff promoted on your channel.

[@KentCDodds-vids]

😊 thank you!

[@bkschatzki]

I came here looking for football highlights, but I didn't expect this level of violence.

[@blenderpanzi]

I would have assumed that this simply sets document.title! Why is it actually adding a element?

[@Cool_Goose]

I just don't get why we need to make so much magical jsx stuff instead of keeping them.. uhm OUTSIDE the damn markup in the first place.

[@PraiseYeezus]

because...metadata often needs to be dynamic? Not sure if this is a serious question

[@Exilum]

Theo literally mentioned how annoying it is to deal with metadata outside the markup with Next. It's just that much more of a pain to make it dynamic without creating a metadata API, which would be, you get it, magic stuff with worse DX.

[@PraiseYeezus]

@@Exilum don't mind them, they're just memeing

[@zdeneksc2895]

Theo mentioning Prime while wearing React T-shirt made me spit on the floor. (It is great to have you both guys. I'm big fan of both of you. Keep the good work!)

[@729usbow]

Stop being such a pvssy brother, wake up

[@codeChuck]

React? hat' tfu :D

[@wlockuz4467]

NFL's library naming game is on top.

[@cheddZyPlays]

react-helmet... the NFL... okay it makes sense now

[@codeChuck]

WOW, Theo, you ads is a work of art in an on itself! So humble! Providing community the opportunity to thrive alongside yourself! Trully, say who your friends are, and I know who you are! Amazing job on ads!

[@999fini]

the name react-"HELMET" already made sense but this is makes even more sense

[@Zingzinging]

Anyone else completely miss the entire Twitch example because they were too distracted by the fractal propagation? 😵

[@codeChuck]

Eventually it gets so small it cannot fit in one pixel :D

[@trontrontrontron4]

honestly these new ads are prob the best thing to happen to this channel :D

[@CapitanCoder]

b**s**t

[@stercorarius]

once again, react chooses a bad default and puts the onus on us to deal with it

[@sbogdaniuk]

Yes please for STREAMING.

[@MichScarn73857]

Kent C Dodds is a top notch educator for enterprise devs. Saw him at a recent conference.

[@darylbarnes9413]

For SEO purposes at least, anytime JS has to provide or update the title tag you have failed versus any competitors using the server to output the title. I don't think JS developers understand how search engine spiders and SEO rankings work in actual practice.

[@Thelukkest]

Why would JS developers not understand that it's bad for SEO to set the title through JS? One does not imply the other I think.

[@darylbarnes9413]

@@Thelukkest because so many use Helmet, this React implementation, and other JS based methods to handle title and other meta tags and somehow think they have a solution for these tags for SEO. Most current generation of JS developers today don't really understand HTML and especially aren't marketers and don't understand the ramifications of their choices when it comes to that. And they don't care about progressive enhancement. Take the average app created by them and turn JS off and watch what happens. That's also actually how the Google spiders view it in practical competitive terms.

[@tomaszzieba315]

You are right. I'm a backend engineer so no expert there. Helmet doesn't work, it doesn't set any tags for search engines. I implemented a kind of SSR. While a bot is browsing the site I serve the traffic on the nginx level to the Backend service to serve a version optimized for SEO

[@emilz0r]

You think google doesn't run your js when indexing your site?

[@darylbarnes9413]

@@emilz0rIf you’re relying on JS for indexing then you might get “indexed” but what’s the point when you’re buried behind #1,106,875 in the results? No serious marketer will allow some JS framework to set their title tags.

[@Sarmusic-bw8kq]

Thank you Theo for the content 🙏 and I would be super interested if you do a more dedicated video about streaming

[@LadyEmilyNyx]

Love these sponsor spots 💖

[@codeChuck]

Absolutely!

[@namesas]

Why do we need to change what already works?

[@ViewportPlaythrough]

... when a tool thats supposed to make complicated things simpler, instead make something so simple be complicated...

[@SandraWantsCoke]

yes to that streaming video

[@codeChuck]

This is an opportunity for Ricky to improve his goal settings and explanation skills. What stuff is he doing and for whom? Automated head tag management (deepest - has priority) with possibility to order head tags by attribute like "order" manually. If tags streamed later, but is upper in the tree, it is ignored. If tag is below in the tree, it should update doc title. The tag with the highest order="12" attribute should win and be applied as final doc title. Presence of "order" attribute is more important than position of a current head tag in the tree.

[@ytlongbeach]

I knew, sooner or later, Theo would bring up “head”.

[@matthew_bub]

these ads are cinematic

[@timmo001]

Primeagen mentioned

[@serge.stecenko]

Yes for streaming!

[@jamashe]

Hi Theo. Which vscode theme are you using? It looks awsome. Thanks.

[@JLarky]

Still don't know who Theo is

[@KentCDodds-vids]

lol

[@codeChuck]

No need to know. Just watch his videos, it would be fine, you will get to know him eventually! :D Just a skater boy from CA with mustache :)

[@MilesFlavel]

I'd argue the most use-cases aren't setting meta tags in multiple places, so this feature is going to be fine as is. If the base feature isn't enough for your application, then the other libraries and implementations aren't going anywhere

[@astartup]

Excellent ad read Theo.

[@TheJubeiam]

Damn those ads are super fun.

[@fus3n]

dude needs a sponsor in every video

[@Tyheir]

When are you dropping the arc blunder.

[@Tokyodb]

Streaming video, please

[@boooooooky]

Can someone tell me what VSCode font is this?

[@saad6948]

Would appreciate the video on Streaming!

[@LongJourneys]

I'm sick of JS tbh. I'm trying to offload all that onto our newbies while I focus more on our backend stuff.

[@stephenreaves3205]

"if you make a db query that is used to determine the title" Do people actually do this? How often are we changing the title on pages? (clearly I'm a back-end dev, btw) EDIT: The twitch example actually makes sense. I should have waited before I commented...

[@DubiousNachos]

Yeah, it's really common in chat and email apps, too

[@emilz0r]

And an article title made in a cms is also a common pattern for head title

[@chepossofare]

So, 11 years later, React give a proper head. (sic!)

[@Ahmuyr]

This is such an easy problem to solve, just add a z-index property on the title, show the one with the highest Z. done.

[@StevenHartgers]

Yup, agree, something like An index of sort

[@ronodipbasak4524]

Great video! More about streaming please!!!!

[@user-q1b2s]

WHAT IS THAT FONT??? THEO USE? Please someone tell it looks very good

[@pokefreak2112]

does this feature even make sense combined with streaming? If you use javascript to dynamically set the title when a component is streamed in I can't imagine web crawlers handling that correctly. And if you're doing a full server-side render it really should be trivial to just have a precedence system for which title should win and only output that one.

[@zahash1045]

“He’s a dev KZbinr with a mustache.” “Oh you mean the primeagen?” Ouch….

[@delc82]

Awesome video as usual! :)

[@mopifyz]

NFL!??!?!?! What, this cannot be real lol

[@munchymanjaro9070]

Hot take, if react would hawk tua while giving proper head, it would become a framework by now.

[@youaskforit]

I'm a backend dev. When I was learning React, I ran in this situation. Turns out, I had to use an extra package for such a basic thing. This is why I was never impress with React despite the hype.

[@bloodonthesnow]

@7:43 lol Jose Valim is a legend, it's cool he is learning about this stuff from you. To say he is "from the Elixir side of things" is an understatement 😂

[@PabloRodriguez-no6zg]

Yes please, make a dedicated video about Streaming

[@JasonAghedo]

What font is that👀

[@crossscar-dev]

wait so component libraries can just change your page title now.

[@everythingisfine9988]

So react is reading from the Angular release strategy playbook now? Ok, can we move to Solid, Svelte and Astro already

[@RobertFerentz]

Missed opportunity to title this "Head trauma" instead of "head" drama.

[@johngagon]

NFL Helmet. How apropos!

[@IndieToMillionaire]

Shame on that ad guy for not knowing who Theo is!

[@HistoryInClip]

Streaming video is demanded by the NFL

[@CottidaeSEA]

I actually think it makes sense for React to not do that work for you. I'd say it is far more reasonable to work with contexts and have a single place to update, rather than having it directly in your JSX markup.

[@ramsey2155]

Why are we solving a non-existent problem? The title can already be changed with one line of javascript. Why all this streaming and other stuff for this?

[@O_Eduardo]

I'm not surprised...another one bad idea from this "library"... React team should focus on github issues tab... I'm waiting for another kind of Douglas Crockford to come and write a book "React, the good parts".

[@johansmith2840]

instead of rendering element, re- render text-content.

[@chiefnerd5578]

Please do a dedicated video on streaming. Thank you!

[@codeChuck]

You should defenitelly explain how streaming works!

[@alexsolovyov3322]

It pains me to see how incredibly difficult it is to update title of the HTML page in 2024...

[@figloalds]

Let's be real for a moment here, that is only a problem if you code like a dingus, am I crazy?

[@sub-harmonik]

imo it is the dev's responsibility to not break browsers by rendering multiple things, especially if react is still trying to pretend it isn't a framework

[@takeiteasyeh]

Seems like a waste to send data you are going to just replace, like, having to load a title twice (twitch) seems counter productive

[@rawallon]

Wait, go back to the streaming out of order thing

[@Naparajith]

"Do you mean ThePrimagen?" 💀

[@CapitanCoder]

Epic React is the worst than Vercel you got sponsored. holy **t

[@CapitanCoder]

Kent's experience is delusional and brain-washing!

[@astenium0]

So no head?

[@ΣτάθηςΣταθόπουλος-σ7ρ]

Please do streaming, with LLMs and streaming react components on our apps this is confusing.

[@Patterner]

what is the url for 0:51?

[@joshuadeguzman2911]

Am I noob? Or is this part where the ssr wins?

[@aymenbachiri-yh2hd]

Thanks for the video

[@dave6012]

This situation really is coming to a head

[@md6886]

Still cant figure out how to hack next that Google cookiebot script would be loaded first script in head beofre title and meta.. . D: To comply with cookiebot banner requirements

[@soroushebi]

Theo please do a video about Streaming

[@irfanmohammad7269]

need a video on streaming

[@KrelleTG]

Please a dedicated video on streaming!

[@Paul_Marek]

Helmet sucks for SEO meta and OG tags - they need to be rendered as HTML before react loads or G and FB doesn’t see them.

[@3pleFly]

Then you don't understand Helmet... It's not meant for that. Modern crawlers can execute javascript to get SEO from Helmet, like if you paste a link on WhatsApp and wait a few seconds it will fetch the SEO from link and you'll see some info. I'd imagine the same happens on Facebook since WhatsApp is part of Facebook/Meta. SPA apps will always have some problem with SEO unless they use SSR framework with SPA clients.

[@Paul_Marek]

@@3pleFly incorrect. I used Hemet on my SPA with React Router and FB and X could not see the OG tags, and big G could not see the meta tags. Reading Helmet’s docs suggests this will work, but while it will create the meta and OG tags, they are invisible to the platforms that they matter to.

[@dae2530]

i want Next.js to able to return custom http status codes!

[@tonybrown9208]

What's the point of streaming an html page? We are not low network bandwidth. What's the point of streaming html content ?

[@wandenreich770]

definately do the streaming video

[@wlockuz4467]

Leave it to React to support a basic web feature after 19 major versions and still have it be practically useless.

[@williamhorn363]

So... no head?

[@awave7710]

sauce us the streaming vid boss

[@Smartercow]

PLEASE DO A STREAMING VIDEO!!

[@DePhoegonIsle]

Who's theo again?

[@miervaldis42]

Yes, the people want a dedicated video about streaming, at least.... I do 😋