Discover the exciting features of React 18, including automatic batching, new render APIs, and the powerful Suspense functionality that enhances data fetching and UI development. Learn how server-side rendering has evolved, merging server-rendered and client-rendered components for better performance. The hosts also tackle React's naming conventions and the significance of tools like Sentry for error handling. Plus, get insights into audio management solutions and the benefits of community engagement in web development!
46:45
forum Ask episode
web_stories AI Snips
view_agenda Chapters
auto_awesome Transcript
info_circle Episode notes
volunteer_activism ADVICE
Automatic Batching
React developers should no longer worry about multiple setStates triggering excessive re-renders.
React 18 now automatically batches these updates for better performance.
insights INSIGHT
New Render API
The new render API in React 18 simplifies server-side rendering (SSR) by eliminating the hydrate method.
This change streamlines the process and resolves inconsistencies between server and client rendering.
volunteer_activism ADVICE
Suspense for Data Fetching
Use Suspense in React 18 to manage loading states efficiently, preventing unnecessary spinners.
Wrap components that fetch data with Suspense and define a fallback to display after a set time.
Get the Snipd Podcast app to discover more snips from this episode
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.
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.
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.
Syntax - Tasty Web Development Treats