React 19 Is FINALLY Here

What a release. This took forever. Server Components, actions, and more, all accessible to everyone without installing a dang canary.
SOURCES
react.dev/blog/2024/04/25/rea...
Check out my Twitch, Twitter, Discord more at t3.gg

[@joe-robin]

I think he hadn't slept in while

[@kchaitanya39]

Who the fuck cares

[@dbizzle4]

Really disappointed they're not coming out with the useDunningKrugarEffect hook

[@naughtiousmaximus7853]

They should make a useVue or useSvelte hook that automatically rewrites your app in respective frameworks.

[@dellavita3463]

What is this mean ? Can somebody explain? Thank you

[@shinmini99]

The Dunning-Kruger effect is a cognitive bias that occurs when someone overestimates their knowledge or abilities in a particular area. The term was coined in 1999 by Cornell University psychologists David Dunning and Justin Kruger.

[@XavierGoncalves89]

I also need some context

[@artieschmidt3039]

@@dellavita3463 maybe a pun on the Dunning Krugar Effect?

[@imbaedin]

The way that the form acts as a context provider is the same way react-hook-form operates. It's nice when building complex reusable form inputs. Essentially the consumer can treat it as an uncontrolled input.

[@tsanyqudsi]

It's going to be interesting to see how reacthookform going to pivot after this.

[@imbaedin]

@@tsanyqudsi react hook form has native support for zod. I think the use cases are different enough to both be used even within the same codebase.

[@AlianzaGaming]

Yes you can do this

[@tsanyqudsi]

@@imbaedin true. But zod might build for this too.

[@seannewell397]

It'll be excellent if they swap some intervals out for these if it detects a react 19 app. No idea how compatible it is, i assume they have reducers internally and couldn't simplify. But maybe not.

[@jackdanielson1997]

Oh yay, 5 new hooks I never wanted. So excited

[@DigitalPlumbing]

rofl, you put words to this lacklustre roadmap/release

[@Eckster]

`use` solves a lot of the issues with useEffect and async work, so I'm pretty happy about that one

[@Sindoku]

They aren’t for you. I’m assuming you’re an application developer. It’s for library authors and to make their lives better.

[@Alkyen]

@@Sindoku which hooks aren't for devs? Yes, they are in beta still so this is why only library authors are advised to play around with them but when React 19 is stable most of those hooks have uses in regular application code.

[@TypingHazard]

I heard that in React 20 if you don't use every Hook that React provides in your app it won't compile. Sadge

[@Jessyco]

Should have the React team add that detail about "use server" and "use client" such a simple explanation that brings clarity, thank you!

[@keithjohnson6510]

The array destructuring assignment point, totally 100% agree. I'm constantly using object destructuring because it creates self documenting code from the caller, you also get great code completion. But there is another really good reason to use object destructuring instead of array, in my tests array destructuring is slower than object destructuring.

[@rafaeldeleon3386]

"...but forms are full of weird implicit b.s., so I think it aligns with that". Yup, forms come with baggage, lets add to the baggage.

[@mateusqueiros3871]

“Yup” I prefer Zod personally

[@VaurionX]

I’m really interested to test this out once it’s more stable. Very exciting that some of the stuff we’ve had in NextJS is coming to React

[@returntozerotv]

Do you think the improvement about stylesheet loading make it possible to use css-in-js in streaming/RSC?

[@martoxdlol]

The "use client" and "use server" explanation was excellent! I will be using it

[@ChrysusTV]

I'm guessing at 10:23 you're referring to mutation scopes for TS Query? Had to dig a bit to find it. Looks like the feature was released only a few days ago so not sure if that's what you're referring to in the video... Seems like a neat idea but probably clunky in practice with a limited use case. For example, I rarely work with forms but rather with editable tables with many rows. The scope can only be set when calling useMutation rather than when calling mutate. Of course you can't conditionally have useMutation so it seems like it would be impossible to limit the scope to a row ID or a row/column pair per call. Instead I'd have to scope it to the entire table so that all mutations on the table run sequentially, even if for entirely different records. In my mind, a form is something you type into and submit once, then wait for validation. It seems strange a system would allow changing and resubmitting a form while it is already submitting (thus running into the race you mentioned). On the other hand, a table is definitely a place where you're constantly moving around and typing into various columns/rows multiple times, yet it looks like granular mutation scope couldn't be supported in such an ideal use case. Of course, I could rebuild the entire table system from scratch (using Mantine on top of TanStack Table currently) to make a custom Row component where each Row has its own mutation scoped to the Row's record -- but definitely not doing that either :) Also why is the sidebar for all TanStack docs so incredibly slow/laggy? Not enjoyable at all to work with 😂 Edit: Nice, there is an ongoing discussion about this limitation :) github.com/TanStack/query/discussions/7126#discussioncomment-8815577

[@zhexymusic]

You seem pretty calm on the video. Why are you making strange faces on thumbnails? 👀

[@aisdjsiasiodjisoajd7698]

if you clicked on the video and left this comment it’s working bud

[@zhexymusic]

@@aisdjsiasiodjisoajd7698 It is an interesting topic, first of all. I've learned to read the title of the video before seeing the thumbnail. But Theo is making too odd faces.

[@whoman7930]

@@zhexymusic yes I hate that too.

[@inakiarias7465]

@@whoman7930 Don't hate the player

[@Sindoku]

I think I’ll stick to using react query for async data management and react-hook-form for forms. They play together nicely.

[@MARKOTHEDEV]

love u for saying this lol. they play tooooo nice

[@yiannis_p]

This video showcases among other things the very edge of the term acceptable when it comes to puns. Amazing video and super stoked for react 19!

[@SkillR1]

for useActionState a better generic naming is `{ state, dispatch, isRunning }` error is only related to the current example

[@dukeselwood]

Did I miss it, or did they not mention the new compiler?

[@potetotes]

React Compiler is not shipping in React 19-but it is coming to oss sooner than you expect. the fundamentals are good (imo) but getting it out sooner comes at a tradeoff of not being fully feature complete. lower your expectations for the release but raise them for when

[@lubovalkov7378]

Yes, I was wondering this as well.. it's happening after it comes out of beta or at a later point? Does anyone know?

[@potetotes]

@@lubovalkov7378 no promises on when, but pretty soon is what i can tell you

[@dbizzle4]

As a small language bot I already switched to SolidJS.

[@AveN7ers]

I'd love to see Solid take over man but companies are slow to change. A shit load of them are still using jayQwellin

[@adamkarafyllidis9264]

I would love to also switch to SolidJS but there is also react native which holds me to react..

[@Quephara]

​@@adamkarafyllidis9264is this compatible with nativescript? Like, I know svelte is

[@helleye311]

The only thing I dislike about all this is the form data. I'll probably end up making a proxy object that's typescript-cast as T. I've also been a huge fan of having some components have custom value/onChange that can accept anything, not just strings. I've made database driven dropdowns with those that give back the full object instead of just the id or whatever, helped in some places. Unfortuntely doesn't seem doable with form data. Not to mention multi-item selects or any other fancy thing like that. I get that form data is the web standard, but I really wish we'd migrate to json/objects already. Same with the UrlSearchParams.

[@cintron3d]

Very cool stuff, only con is the library just keeps getting bigger. I love SolidJS for the small bundle size. But some of those features like script tags look really useful.

[@AdeelEjaz]

"I have feelings, I have a lot of feelings..." Yes, Theo, don't we all.... don't we all...

[@aurorasofie]

I’m actively using the use() hook for the promise-part in my project. It’s super use()ful. For example, I have a server component fetching multiple pieces of data. And it contains multiple client components that need this data. I can now call const data = getData, (and I have multiple of these) and pass these promises down, then suspend the client components individually. If I didn’t do this, the whole server component would have to suspend for the await to finish.

[@NR1612]

These bot accounts are crazy. Anyway, excited to use some of these hooks and maybe get rid of bloated state managers for my smaller projects.

[@guseynismayylov1945]

just use EHTML dude

[@SandraWantsCoke]

bot accounts?

[@NR1612]

@@SandraWantsCoke They've been removed since I commented. A lot of sexually suggestive profile pictures.

[@guseynismayylov1945]

Why do I need to load my css by React, if I can preload them in tag via .

[@NopeNopeNope9124]

Yeah well React 20 is gonna blow your mind

[@mark1395711]

How would the submit not the first item of the useActionState returned array You will 100% need the submit, but not error(for example error is catched in the API client level and automatically shows a error popup) Then you'll have the first arg unused

[@3dxspx703]

Finally. Svelte is the goat.

[@ChimbzZ]

15:43 where did they define updatedName? Or is it a typo?

[@e_tas_]

3:15 don't we have enough concepts referred to as "actions"? server actions, action arguments for reducers...

[@lukasmolcic5143]

if you think of actions as a counter part for pure functions, function which handle side effects, then it makes sense in both cases

[@e_tas_]

@@lukasmolcic5143 Yeah but now you have to do context switching. I think there's just way too many things called the same thing. And for example when I do "server actions" I just think "actions", same with state management I just think "actions" but internally I know what it is... And same with this. I'll be fine but i'm sure it'll be confusing for newer devs. I wonder how many more "actions" there are that I'm not aware of :p

[@tinrab]

The new Form utils are good for the ecosystem, I guess. Frameworks can agree on how to do forms. But, my go-to is still react-query and hook-form or tanstack form.

[@PhilipAlexanderHassialis]

Interesting stuff, leaning heavily though into the SSR and RSC side of things. I wonder if there will be a time when we can declare a client only functional component as an async function and then have the client exclusively await the whole thing inside a suspense boundary. Now, that, that would be neat.

[@davien001]

You can use the use() hook for API call then surround the component fetching data with a Suspense component with a fallback loading state.

[@Fanaro]

React should create a troll hook called `useCase`.

[@NishadGurav]

Glad to see you're a fellow "Outer Wilds" fan!

[@t3dotgg]

Keep an eye out for me in the credits ;)

[@olivierromanetti9651]

What can I say ? thank you for this tutorial. It took me 3 days to do it and figure it out ha ha. It's very dense, and therefore very stimulating. So thank you again Théo! great content. I'm going to bed less stupid

[@DavidInoa]

17:02 You're mistaken regarding the need of a wrapper You can directly return the result of the .map() function inside a React component's render method or another JSX expression. export default function App() { const greeting = ["Hello", "World"]; return greeting.map((value) => {value}); } // Returns: // Hello // World I would link you to a codesandbox, but my comment will get removed. Try it yourself

[@adamviktora6440]

Yes, array of JSXElements is a valid ReactNode, and can be used just like a fragment

[@Jamiered18]

Don't forget the keys though

[@Dom-zy1qy]

Did you record this early in the morning? You seem a little bit more chill in this video than usual. Not complaining, just a different vibe.

[@Lemmy4555]

Svelte beta: at first i did not like it but these runes makes sense React beta: not sure what should i do with these hooks

[@ankitkumarjat9886]

So in simple words react has its own react-query implementation 😂😂😂

[@owenwexler7214]

35:03 That's definitely going to be fixed by the end of the next Hacktoberfest if not before.

[@thegrumpydeveloper]

If they ship with ordered props definitely going to wrap that with a named prop version of it.

[@tusharsharma4972]

to select second element you don't have to put an "_" underscore as the first item, you can just do const [,second] = ["first", "second"] and it would pick up the second element

[@abdoufma]

Wait, wasn't the react compiler part of the 19.0 release? 🤔

[@zuma206]

The reason they didn't show suspense for use, is because you technically don't need it. The initial react render is now async, and will just be delayed by any use calls. Then if you were to wrap every state change in a transition, the transition can also wait out the use calls. It's only for non-transition state changes that you actually NEED a suspense.

[@megamind452]

But where is the "server" actually located in the React server component?

[@Frexuz]

"Just load a script tag" (video player example) definitely won't work for external ones if ur using strict CSP policies. Just something to think about :)

[@fcnealvillangca7943]

I will wait for tutorials and people testing it before I go back to make project with react

[@Dimonina]

Time flies, but nothing changes. All the frameworks introduce features which solve the problems that could be solved with rxjs out of the box many years ago.

[@NaCl-e]

There are many of your takes I don't agree with as a developer, but I really like hearing your points as well. Maybe my viewpoint will change to be similar to yours somewhere down the line. In other words, great job outlining the changes, keep on doing what you are doing.

[@PascalVos]

custom element support finally!

[@zuxcode]

23:44 I feel bad for the forward ref 😂

[@huntinator77]

I just... I don't like implicit stuff. Maybe that's just me, but this is why I avoid using already. I'd rather keep making my own little form hook or using react hook form, where I or other devs can always view the implementation. It's just one less thing that you have to learn about the framework to be able to use it. Like an input with type=submit? There's no way you could ever figure that out without being told by a tutorial or another dev or the mdn docs. But a button with onclick calling a function that you implemented 20 lines later? Easy, straightforward, self-documenting. I'm sure there will be plenty of people who like the new form extensions and will use them all the time, but I don't think these are for me

[@alexbennett5647]

React 19: We leverage the bundler now!

[@upsxace]

Woah, i'm pleasently surprised by the new stuff. React is actually taking care of multiple scary problems that have been a nightmare for years. A bit late, but better late than never. Hopefully they keep that direction in the next following yeas.

[@ScottMaday]

8:00 L take, I find it incredibly rare to accidentally swap the order of destructured arrays. And if I do, it's fairly obvious since I won't hear the end of it from typescript until its fixed and will be caught well before it makes it to code review. It's not worth so much extra verbosity to type using the object destructured (which I believe was a big complaint from Theo when reviewing Panda CSS)

[@elfensky]

please explain why the [error, submit, isPending] order matters, doesn't it simply get them by name from the ActionState, like a useContext?

[@TypingHazard]

You're not accessing key-value pairs like myObject[error], you're destructuring an array. So you do have to Just Know what the values at a given index in the array actually do. Like when you do something like "const [foo, setFoo] = useState('');" useState is just returning an array with some value and some state setter, they aren't named and it's up to the developer to know that index 0 is the value and index 1 is the setter

[@elfensky]

@@TypingHazard :O

[@user-ik7rp8qz5g]

What about compiler? When it will be available?

[@potetotes]

React Compiler is not shipping in React 19-but it is coming to oss sooner than you expect. the fundamentals are good (imo) but getting it out sooner comes at a tradeoff of not being fully feature complete. lower your expectations for the release but raise them for when

[@yamyam263]

Any video by casual apparel Theo is automatically a banger ❤

[@parifuture]

Oh Theo…a tee? Hope all is well

[@Matt23488]

9:50 - You don't have to discard tuple members with an underscore, you can simply omit the name entirely and just put a comma to denote you are skipping an element. However I don't think that actually addresses your concerns all that well. Personally I really like the tuple returns because of naming the values while writing half as much code to do so compared to renaming destructured object keys. I don't think having to remember the order is as big a deal as you are making it out to be. Perhaps with vanilla JS I could potentially see issues arising from that, but if you're using TypeScript this will be a non-issue entirely since they all have different types.

[@keithjohnson6510]

So -> `const [name, setName] = useState('')` is good, but -> `const {get: name, set: setName} = useState('')` is too much typing.? Not really twice as much code, but I can give you good reason for the second version, it's faster..

[@drewhjava]

Ready for the new Sima version

[@user-kf7vy5yu2v]

I think ill wait for Masim personally

[@LaughingRam]

SIMA and then Ligma, in that order.

[@andersbodin1551]

I hope react 19 will make class components cool again

[@emmanueleboh868]

Looks promising, I could say we now have an opinionated way for writing forms in React

[@Paul_Marek]

I’m new. I didn’t understand a word he said for the whole video. But I’m learning.

[@janszalke3620]

9:52 You do not need to add underscore. You can just ignore it - `const [,submit, isPending] = useActionState(...)`.

[@MrSofazocker]

Arrays consisting of not even multiple datatypes, but error, data, and hooks is batshit insane.

[@igots]

The title and meta tags stuff is going to cause more grief than people realize.

[@creaky2436]

Still not a fan of useOptimistic. You can just use simple state for all of that. You can even write your own hook that does it, or have some toast that pops up if the data that was trying to be updated failed or something.

[@user-ho4yz2fl3i]

At first glance these hooks are somewhat in the direction of react-query

[@Fanaro]

Theo, no need to rush with content. Take some rest.

[@calo4626]

I was taught that hooks should never have if-else conditions before it. I hate to use `use`.

[@anwiseru9064]

"i could even see a library that does the..." scariest javascript developer words

[@RuySenpai]

0.0001 seconds into the video "Is that an Outer wilds shirt?"

[@garcipat]

What happened to the compiler stuff?

[@gageracer]

Bro I hope you are okay, you sound tired and different from the other vids. That is all fine, just got worried all of a sudden in this vid.

[@nothingtoseehere5760]

I'm learning React, should I bother with 18? It seems like it includes so many redundant things...

[@hazembenbz]

After breaking half my dependencies upgrading to react18, I guess it is time to break the other half 😂

[@academai11]

web is like a wine, its aging but not fine

[@paxdriver]

Dude thanks for the vid. You look like you just gave birth at the office lol I feel bad you work so hard. Legit question though, how is an event or signal with usememo, or a consolidation function, considered "a bunch of other code" to accomplish the same thing as use transition? It never really seemed like a lot to me. Even arrow functions seemed pointless shorthand unless binding "this" is part of the function (in which case arrow functions are a godsend and why would you use anything else?)

[@seannewell397]

Using context for form state kinda sucks imo. A signal or a composable & selectable stats primitive (zustand / jotai) feels much better to prevent excessive re-renders.

[@ramonj360]

also React Native 0.74 👀

[@coolemur976]

9:30 This should be basic knowledge that named prop object is better than array... How they even thought of using array for this.

[@paxdriver]

36:34 prediction - phantom infinite renders one day. Terrible idea. Explicit is better. I'd much prefer a reliable error than an unreliable rare error after deployment.

[@stepans2167]

9:45 you don't have to put the underscore there

[@velifurkanturkoglu1387]

how would that work otherwise? There is a pattern there and if you omit "error" and dont subsitute with anything the pattern will just break. Is not what he is criticizing ?

[@stepans2167]

@@velifurkanturkoglu1387 you can just put a comma in there without the underscore

[@tspander]

@@velifurkanturkoglu1387you keep the comma. So you write `[, submitAction, isPending]`

[@bomberfish77]

16:29 Pretty sure React copied this from a smaller framework called DreamlandJS

[@user-tb4ig7qh9b]

The reason is performance v8 could handle array better than object

[@jon1867]

Meanwhile, the new TS Beta release looks FIRE

[@HilaryCheng]

Nth special, I just wants a simplified react management rather adding new hooks for us. Those tons of dependencies with tons of useHooks are nightmare for developers. I just wanna to get a simple state management just like Svelte or Vue. I can't switch to Svelte / Vue due companies policies......

[@Fanaro]

So much of being a web dev is dealing with forms. It's still super disappointing we have to reinvent the wheel every time.

[@earnstein7607]

We have all these in tanstack, what part of DRY did react developers not get?

[@claasdev]

Not sure what’s harder to learn, react or rust? (I’m joking) 😄

[@zapphoddbubbahbrox5681]

when i read this earlier, i didn't come so hard because HTMX (ceo/same)

[@igots]

Imagine debuging why a page has the wrong meta tag when it's some deeply nested component.

[@Zeragamba]

You doin ok there Theo? You sound really worn out in this video compared to your other stuff.

[@kashnigahbaruda]

Shocking how many broken code examples are in that blog.

[@blazi_0]

Who the hell gonna use these hooks 😂

[@paxdriver]

Isn't any server component the same as a js file called by the server and the output served by an api? How is that any different from Express? I don't understand all these changes because very few of them seem to serve a need. If shorter code results in less legible code, the more code is better if it's descriptive. I hate shortening code just for the sake of character counts when it makes it take twice as long to figure out the 4 different ways to write the same thing without performance benefits. Nobody is impressed by fewer lines lol I don't like changes when nobody benefits from them, but many people suffer. Ref should be a built-in prop, not a second arg. If you're gonna need the ref it might as well be a reserved key in props, like why not?

[@binitrupakheti4246]

I hate the naming on the use hook. Should've just named it something else.

[@lightblade007]

React has some great concepts wrapped up by bad API 😂

[@carlosduran5460]

React 19 killed react-hook form, react-query, swr, react-helmet, styled components,etc.

[@lalibi]

What's with the "attributes" pronunciation?

[@dobryden7196]

If you use React long enough you cant just forget the order of elements in the deconstructed hook array. Changing it to object would make it too complicated as all the other hooks would still use arrays and it would be difficult for newcomers to remember which hooks use arrays and which use objects. Also naming is quite easy now as you said.