Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - React Suspense

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p>In this Hasty Treat, Scott and Wes talk about React Suspense — what it is, how it works, support and more!</p> <h2><a id="Sentry__Sponsor_9" name="Sentry__Sponsor_9"></a>Sentry - Sponsor</h2> <p>If you want to know what’s happening with your errors, track them with <a href="https://sentry.io/">Sentry</a>. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code “tastytreat”.</p> <h2><a id="Show_Notes_13" name="Show_Notes_13"></a>Show Notes</h2> <p>Not live yet - it may/will change. Be warned!</p> <p>3:59 - The problem we have with React right now</p> <ul> <li>API calls</li> <li>Image loading</li> <li>Code splitting</li> </ul> <p>7:16 - What is React Suspense?</p> <ol> <li>First we convert our async data fetching functions into <strong>resources</strong></li> <li>Resources can then be read inside render - above the return</li> <li>Resources can be read from cache</li> <li>Resources can be preloaded into a cache if you anticipate needing them</li> <li>Resources reads are blocking for that function - you can’t return JSX until the resource is read</li> <li>In your component that fetches data, there is no need to maintain a loading state</li> <li>Then, anywhere higher up in that tree, you can introduce a suspense component</li> <li>The suspense component can <strong>detect</strong> if any of it’s children are currently loading data</li> <li>If they are, we can then choose to show a loader via the <strong>fallback</strong> prop</li> <li>We can also choose to <strong>show nothing via the maxDelay prop</strong> — this is helpful for fast connections that shouldn’t see the spinner for a short split-second</li> </ol> <p>15:20 - Support</p> <ul> <li>React.lazy and suspense for code splitting is already here</li> <li>The React.lazy function lets you render a dynamic import as a regular component</li> <li>Loadable Components is recommended if you need splitting with SSR</li> <li>Data Resources is not here yet</li> </ul> <h2><a id="Links_43" name="Links_43"></a>Links</h2> <ul> <li><a href= "https://reactjs.org/blog/2018/11/27/react-16-roadmap.html#react-16x-mid-2019-the-one-with-suspense-for-data-fetching"> React 16.x Roadmap</a></li> </ul> <h2><a id="Tweet_us_your_tasty_treats_46" name= "Tweet_us_your_tasty_treats_46"></a>Tweet us your tasty treats!</h2> <ul> <li><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li>Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes talk about React Suspense — what it is, how it works, support and more!
 Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
 Show Notes Not live yet - it may/will change. Be warned!
 3:59 - The problem we have with React right now
 API calls
 Image loading
 Code splitting
 7:16 - What is React Suspense?
 First we convert our async data fetching functions into resources
 Resources can then be read inside render - above the return
 Resources can be read from cache
 Resources can be preloaded into a cache if you anticipate needing them
 Resources reads are blocking for that function - you can’t return JSX until the resource is read
 In your component that fetches data, there is no need to maintain a loading state
 Then, anywhere higher up in that tree, you can introduce a suspense component
 The suspense component can detect if any of it’s children are currently loading data
 If they are, we can then choose to show a loader via the fallback prop
 We can also choose to show nothing via the maxDelay prop — this is helpful for fast connections that shouldn’t see the spinner for a short split-second
 15:20 - Support
 React.lazy and suspense for code splitting is already here
 The React.lazy function lets you render a dynamic import as a regular component
 Loadable Components is recommended if you need splitting with SSR
 Data Resources is not here yet
 Links  React 16.x Roadmap
 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

Aplikace Youradio Talk

Hasty Treat - React Suspense

Poslechněte si podcast