React 19 is here!
Vložit
- čas přidán 5. 06. 2024
- Scott and Wes serve up all the deets on the latest React 19 update, exploring new features like actions, web components, use()API, and document metadata. Stay tuned as they discuss the ins and outs of upgrading to React 19 and what it means for your projects.
Show Notes
00:00 Welcome to Syntax!
01:30 Brought to you by Sentry.io.
02:03 What's in the update?
03:03 Actions + server actions.
04:54 Using server actions for a checkout.
06:11 Web components.
09:44 use() API.
10:31 With promises.
14:25 With context.
17:32 How does Zustand work?
18:26 No more ForwardRef.
20:05 Ref cleanup.
20:43 Document metadata.
24:14 Upgrading to React 19.
All links available at syntax.fm/768
------------------------------------------------------------------------------
Hit us up on Socials!
Scott: / stolinski
Wes: / wesbos
Randy: / @randyrektor
Syntax: / syntaxfm
www.syntax.fm
Brought to you by Sentry.io
#webdevelopment #webdeveloper #javascript - Věda a technologie
It is truly enlightening and provided valuable insights into the latest features and improvements in React 19
It’s really great to see React supporting web components so well now. I’m _not_ a React dev but I see WC’s as a wonderful pivot point between various applications, particularly if you’re writing code that has to be shared across separate teams/apps/sites or making a library or something.
For real. I'm all for it
23:40 I haven't tried this, but maybe it's possible to just use "onLoad" event handler on script tag? Same way you can do onLoad on an img tag for example.
8:11 Svelte is great with web components, but still has some minor kinks here and there, particularly nesting in the light DOM and with supporting context. HMR too. That’s why I created svelte-retag which supports that, light DOM and even Vite HMR. I did all that since I loved Svelte but also needed a smooth way to integrate it into our legacy PHP monolith and so far it is working really great for us; especially context, which is a killer feature for us.
Sick!
How do you write react components now? Functions, classes, web components?
Functions is the way.
Presumably the main method of authoring would be functions (over classes). Web components is different; more of a way to ship or share the components outside of React or in plain HTML alongside other stuff.
no ForwardRef is key of imperativeHandle, now in 19 more easy to implement imperativeHandle :D
Zustand is different to context though, Zustand is global only. Context can be used in multiple places in the tree with different values.
Yes true, but nothing stops you from using Context to inject a Zustand store which would then be a separate Zustand store instance for each of those component trees.
Sorry, I commented before I got to the part where they talk about Context. Yeah, they only think about global Context at the top level of the app that only is a single instance of that Context. They aren't really considering the scenario where you might want to render Context multiple times in different trees and provide different values to each of those Contexts as you mentioned.
Although admittedly, global Context is way way more common so it's understandable that comes to mind first.
@@rand0mtv660 I still don't think context as a pattern is better than what's out there for instance local state. Preact signals, Recoil, Jotai are all better for that than context IMO.
@@stolinski Hmm I gotta admit I haven't tried Recoil or Jotai, but also never really considered Context bad or not good.
Only downside for me regarding Context is the "all consumers re-render" part.
Summarizing the podcast: React 19 tries to work like Svelte.
Not quite yet. Hopefully someday they take more from svelte.
Lit was terrible for writing web-components in. Svelte was far better. Mostly not having to lean on template string for all the html div description.
I think lit was pretty lit. It feels very vanilla. Without all the framework jumbo.
I just don't like classes very much. Very few good use cases for them. Ui components definitely not one of them.