meta_pixel
Tapesearch Logo
Log in
Syntax - Tasty Web Development Treats

React 18 - A Look Ahead

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, Technology, News

4.9 • 1.2K Ratings

🗓️ 14 July 2021

⏱️ 47 minutes

🧾️ Download transcript

Summary

In this episode of Syntax, Scott and Wes talk about everything coming in React 18! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com. Show Notes 04:32 - Automatic Batching Don’t worry about re-renders 08:32 - New Render API const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); No more hydrate method (yay!) 10:44 - Suspense Suspense is basically a promise resolver component - nothing inside will render until promise is resolved. SuspenseList lets you coordinate the order in which loading indicators show up. 16:43 - StrictEffects Mode https://github.com/reactwg/react-18/discussions/19 Will allow components to mount, unmount, and mount again Will help with fastrefresh and really good dev experience 18:43 - useTransition() Hook Not an animation hook. They named it this because of the future ability to add animations to React core. Wrap the state update in a “transition” to prevent the ProfilePage from being unmounted while suspending. This lets React know that it should wait for the update to complete. We classify state updates in two categories: Urgent updates reflect direct interaction, like typing, hover, dragging, etc. Transition updates transition the UI from one view to another. 23:11 - SSR Improvements React.Lazy will work on the Server Finally! https://github.com/reactwg/react-18/discussions/37 Server-side rendering (abbreviated to “SSR” in this post) lets you generate HTML from React components on the server, and send that HTML to your users. SSR lets your users see the page’s content before your JavaScript bundle loads and runs. React Server Components 34:45 - ELI5 https://github.com/reactwg/react-18/discussions/46 36:37 - Next.js Next.js will probably have support for a lot of these features soon. Links https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html https://dev.to/cassidoo/react-18-alpha-is-out-now-what-2apj https://github.com/reactwg/react-18 https://github.com/reactwg/react-18/discussions Svelte Syntax 127: Hasty Treat - React Suspense Deno ××× SIIIIICK ××× PIIIICKS ××× Scott: SoundSource App Wes: The Changelog 443: Exploring Deno Land Shameless Plugs Scott: Building Svelte Components - Sign up for the year and save 25%! Wes: Beginner JavaScript - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Transcript

Click on a timestamp to play from that location

0:00.0

You're listening to syntax the podcast with the tastiest web development treats out there strap yourself in and get ready

0:07.7

Here is Scott to Lensky and West boss. Let's get ready to

0:13.6

Scott stuff. Get ready to

0:17.2

uh get ready to send jacks. Just last week react dropped

0:22.8

A massive set of what's going on with react? What's coming down the the pipe? How is everything gonna work?

0:29.8

It's like a breath of fresh air because there's a lot in react. We're like what's the status of all of this stuff

0:34.7

Like I literally tweeted the week before this like what's going on with the SSR and react and whatnot

0:40.0

There's like no details and

0:42.0

Now there's tons of details about what's coming down the pipe for react 18 some big changes and some really exciting stuff

0:48.3

So we're gonna talk about all of the features in react 18 that are to becoming and what you use them for

0:55.2

We are sponsored by fresh books cloud accounting sentry air exception and performance tracking and revenue cat

1:03.1

Making it easy meow making it easy to build and manage

1:08.1

iOS and android in app purchases log about all them partway through the episode

1:12.6

How you doing today Scott? Hey

1:15.6

I was wondering do you think the react team just like hadn't been working on this and then they saw your tweet

1:20.2

And they're like oh shoot. I forgot about that. I got a better start working on it

1:23.4

And then they just hustled and got that that out real quick

1:26.5

No, it also it's funny because the yeah the react team dropped the huge dump on the

1:31.6

Huge dump code and then subsequently on our episode of syntax that we had recorded talking about this very same thing

1:39.1

And then had to delete that episode because it was made completely invalid

1:43.8

The moment that that was released because we were talking about all of these things and then all of a sudden it did not apply

1:49.2

It was hilarious. It was like an entire hour of scoping like well, what about this this sucks

...

Please login to see the full transcript.

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.

Copyright Š Tapesearch 2026.