React 19 Is FINALLY Here
Vložit
- čas přidán 24. 04. 2024
- 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 - Věda a technologie
I think he hadn't slept in while
Who the fuck cares
Really disappointed they're not coming out with the useDunningKrugarEffect hook
They should make a useVue or useSvelte hook that automatically rewrites your app in respective frameworks.
What is this mean ?
Can somebody explain?
Thank you
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.
I also need some context
@@dellavita3463 maybe a pun on the Dunning Krugar Effect?
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.
It's going to be interesting to see how reacthookform going to pivot after this.
@@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.
Yes you can do this
@@imbaedin true. But zod might build for this too.
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.
Should have the React team add that detail about "use server" and "use client" such a simple explanation that brings clarity, thank you!
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.
Oh yay, 5 new hooks I never wanted. So excited
rofl, you put words to this lacklustre roadmap/release
`use` solves a lot of the issues with useEffect and async work, so I'm pretty happy about that one
They aren’t for you. I’m assuming you’re an application developer. It’s for library authors and to make their lives better.
@@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.
I heard that in React 20 if you don't use every Hook that React provides in your app it won't compile. Sadge
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
"...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.
“Yup” I prefer Zod personally
The "use client" and "use server" explanation was excellent! I will be using it
Do you think the improvement about stylesheet loading make it possible to use css-in-js in streaming/RSC?
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
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!
I think I’ll stick to using react query for async data management and react-hook-form for forms. They play together nicely.
love u for saying this lol. they play tooooo nice
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.
for useActionState a better generic naming is `{ state, dispatch, isRunning }`
error is only related to the current example
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.
Why do I need to load my css by React, if I can preload them in tag via .
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.
As a small language bot I already switched to SolidJS.
I'd love to see Solid take over man but companies are slow to change. A shit load of them are still using jayQwellin
I would love to also switch to SolidJS but there is also react native which holds me to react..
@@adamkarafyllidis9264is this compatible with nativescript?
Like, I know svelte is
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
"I have feelings, I have a lot of feelings..." Yes, Theo, don't we all.... don't we all...
You seem pretty calm on the video. Why are you making strange faces on thumbnails? 👀
if you clicked on the video and left this comment it’s working bud
@@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.
@@zhexymusic yes I hate that too.
@@whoman7930 Don't hate the player
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.
just use EHTML dude
bot accounts?
@@SandraWantsCoke They've been removed since I commented. A lot of sexually suggestive profile pictures.
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.
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.
You can use the use() hook for API call then surround the component fetching data with a Suspense component with a fallback loading state.
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
Glad to see you're a fellow "Outer Wilds" fan!
Keep an eye out for me in the credits ;)
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.
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.
Yeah well React 20 is gonna blow your mind
15:43 where did they define updatedName? Or is it a typo?
Did I miss it, or did they not mention the new compiler?
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
Yes, I was wondering this as well.. it's happening after it comes out of beta or at a later point? Does anyone know?
@@lubovalkov7378 no promises on when, but pretty soon is what i can tell you
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.
35:03
That's definitely going to be fixed by the end of the next Hacktoberfest if not before.
If they ship with ordered props definitely going to wrap that with a named prop version of it.
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.
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
React 19: We leverage the bundler now!
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
I will wait for tutorials and people testing it before I go back to make project with react
But where is the "server" actually located in the React server component?
please explain why the [error, submit, isPending] order matters, doesn't it simply get them by name from the ActionState, like a useContext?
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
@@TypingHazard :O
Any video by casual apparel Theo is automatically a banger ❤
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
Yes, array of JSXElements is a valid ReactNode, and can be used just like a fragment
Don't forget the keys though
23:44 I feel bad for the forward ref 😂
What about compiler? When it will be available?
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
React should create a troll hook called `useCase`.
"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 :)
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.
I’m new. I didn’t understand a word he said for the whole video. But I’m learning.
Finally. Svelte is the goat.
custom element support finally!
Arrays consisting of not even multiple datatypes, but error, data, and hooks is batshit insane.
So in simple words react has its own react-query implementation 😂😂😂
Theo, no need to rush with content. Take some rest.
Oh Theo…a tee? Hope all is well
Ready for the new Sima version
I think ill wait for Masim personally
SIMA and then Ligma, in that order.
Wait, wasn't the react compiler part of the 19.0 release? 🤔
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.
I hope react 19 will make class components cool again
Looks promising, I could say we now have an opinionated way for writing forms in React
0.0001 seconds into the video "Is that an Outer wilds shirt?"
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.
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..
"i could even see a library that does the..."
scariest javascript developer words
What happened to the compiler stuff?
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?)
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
web is like a wine, its aging but not fine
The title and meta tags stuff is going to cause more grief than people realize.
16:29 Pretty sure React copied this from a smaller framework called DreamlandJS
Meanwhile, the new TS Beta release looks FIRE
After breaking half my dependencies upgrading to react18, I guess it is time to break the other half 😂
I was taught that hooks should never have if-else conditions before it. I hate to use `use`.
9:30 This should be basic knowledge that named prop object is better than array... How they even thought of using array for this.
Shocking how many broken code examples are in that blog.
At first glance these hooks are somewhat in the direction of react-query
The reason is performance v8 could handle array better than object
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.
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)
when i read this earlier, i didn't come so hard because HTMX (ceo/same)
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.
Imagine debuging why a page has the wrong meta tag when it's some deeply nested component.
Not sure what’s harder to learn, react or rust? (I’m joking) 😄
Instead of adding like 10 new hooks that we dont need, FIX FORMS, PLEASE!
Save yourself, go htmx
9:45 you don't have to put the underscore there
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 ?
@@velifurkanturkoglu1387 you can just put a comma in there without the underscore
@@velifurkanturkoglu1387you keep the comma. So you write `[, submitAction, isPending]`
I'm learning React, should I bother with 18? It seems like it includes so many redundant things...
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......
also React Native 0.74 👀
We have all these in tanstack, what part of DRY did react developers not get?
9:52 You do not need to add underscore. You can just ignore it - `const [,submit, isPending] = useActionState(...)`.
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.
React has some great concepts wrapped up by bad API 😂
So much of being a web dev is dealing with forms. It's still super disappointing we have to reinvent the wheel every time.
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.
Who the hell gonna use these hooks 😂
"React 19 BETA Is FINALLY Here". Dude, c'mon.
You doin ok there Theo? You sound really worn out in this video compared to your other stuff.
I hate the naming on the use hook. Should've just named it something else.
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?
React won over Angular because it didnt much have as much proprietary syntax. Now it looks like everything is moving to new hooks. Which seems like a terrible way of doing things. Future react interviews will just you showcase that you know what each and every hook does. Really wish more companies will move away from React.