Artwork

İçerik Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers tarafından sağlanmıştır. Bölümler, grafikler ve podcast açıklamaları dahil tüm podcast içeriği doğrudan Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers veya podcast platform ortağı tarafından yüklenir ve sağlanır. Birinin telif hakkıyla korunan çalışmanızı izniniz olmadan kullandığını düşünüyorsanız burada https://tr.player.fm/legal özetlenen süreci takip edebilirsiniz.
Player FM - Podcast Uygulaması
Player FM uygulamasıyla çevrimdışı Player FM !

React 18 - A Look Ahead

46:39
 
Paylaş
 

Manage episode 297463742 series 1469447
İçerik Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers tarafından sağlanmıştır. Bölümler, grafikler ve podcast açıklamaları dahil tüm podcast içeriği doğrudan Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers veya podcast platform ortağı tarafından yüklenir ve sağlanır. Birinin telif hakkıyla korunan çalışmanızı izniniz olmadan kullandığını düşünüyorsanız burada https://tr.player.fm/legal özetlenen süreci takip edebilirsiniz.

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

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

36:37 - Next.js

  • Next.js will probably have support for a lot of these features soon.
Links ××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs Tweet us your tasty treats!
  continue reading

751 bölüm

Artwork

React 18 - A Look Ahead

Syntax - Tasty Web Development Treats

4,052 subscribers

published

iconPaylaş
 
Manage episode 297463742 series 1469447
İçerik Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers tarafından sağlanmıştır. Bölümler, grafikler ve podcast açıklamaları dahil tüm podcast içeriği doğrudan Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers veya podcast platform ortağı tarafından yüklenir ve sağlanır. Birinin telif hakkıyla korunan çalışmanızı izniniz olmadan kullandığını düşünüyorsanız burada https://tr.player.fm/legal özetlenen süreci takip edebilirsiniz.

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

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

36:37 - Next.js

  • Next.js will probably have support for a lot of these features soon.
Links ××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs Tweet us your tasty treats!
  continue reading

751 bölüm

Tüm bölümler

×
 
Loading …

Player FM'e Hoş Geldiniz!

Player FM şu anda sizin için internetteki yüksek kalitedeki podcast'leri arıyor. En iyi podcast uygulaması ve Android, iPhone ve internet üzerinde çalışıyor. Aboneliklerinizi cihazlar arasında eş zamanlamak için üye olun.

 

Hızlı referans rehberi