Syntax - Tasty Web Development Treats
Spela

Hasty Treat - React Suspense

Syntax - Tasty Web Development Treats

00:00

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.

Syntax - Tasty Web Development Treats

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

Published

Play Episode

Related episodes Syntax - Tasty Web Development Treats

Syntax - Tasty Web Development Treats

Bootcamps vs School vs Self-learning
In this episode Wes and Scott talk about developer education — what to look for, what to avoid, and how to be a life-long learner with good problem solving skills. Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. The Armoury - Sponsor The Armoury is a men’s clothing and accessories retaile...

en

Syntax - Tasty Web Development Treats

Hasty Treat - Communication Skillz
In this Hasty Treat, Scott and Wes talk about communication — why it’s important, how to improve, building good habits, tools 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 fre...

en

Syntax - Tasty Web Development Treats

Potluck - Are classes dead? × Tutorials vs Real Life × CRA vs Next × Scraping × More
It’s another potluck episode in which Wes and Scott answer your questions! This month - are classes dead?, tutorials vs real life, the smart home, developers and mental health, and more! 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 errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in...

en

Syntax - Tasty Web Development Treats

Hasty Treat - Authentication: LocalStorage vs Cookies vs Sessions vs Tokens
In this Hasty Treat, Scott and Wes talk about authentication — the difference between localStorage, cookies, session, tokens and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax. Show Notes 4:20 - How should we track users? Token based - generally stored in the client Session based - stored on the server To...

en

Syntax - Tasty Web Development Treats

How We Manage Our Lives — Notion, Todos, Notes, Focusing, Calendars, Goal tracking, and more!
In this episode, Wes and Scott talk about life management — the systems and tools for managing all the the busy details of life and work. 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 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 fro...

en

Syntax - Tasty Web Development Treats

Hasty Treat - Tips to Succeed on YouTube
In this Hasty Treat, Scott and Wes talk tips to succeed on YouTube! 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. Show Notes 1:55 How YouTube has affected our careers 3:45 YouTube money is just OK 6:28 SEO is king 7:15 The title is most important 8:59 Description is important 11:00 Use Tags. All of them. 12:00 Scheduled content works 13:26 Keeping Viewers 15:20 Pinning comments 15:41 Liking C...

en

Syntax - Tasty Web Development Treats

Gatsby vs Next
In this episode, Wes and Scott debate Gatsby vs Next — how they compare, the pros and cons of each, why you might chose one over the other for your next project, and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax. The Armoury - Sponsor The Armoury is a men’s clothing and accessories retailer that provides ...

en

Syntax - Tasty Web Development Treats

Hasty Treat - Better Living Through Side Projects
In this Hasty Treat, Scott and Wes talk about side projects — what you can learn, why they’re great, how to come up with ideas, 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 f...

en

Syntax - Tasty Web Development Treats

The Smart Home
In this episode, Wes and Scott talk about the Smart Home — all the different tech available, how it works together, pitfalls to avoid, hardware, software, and more! Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. Stackbit - Sponsor Build modern JAMStack websites in minutes. Stackbit lets ...

en

Syntax - Tasty Web Development Treats

Hasty Treat - How To Email Busy People
In this Hasty Treat, Scott and Wes tackle email, specifically, how to email busy people — how to write emails that actually get read, and don’t just get tossed in the archive. 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. Syn...

en

Syntax - Tasty Web Development Treats

Potluck - Changing careers × Repo organization × CSS Grid × Certifications × Freelancing × Spammers × More
It’s another potluck episode in which Wes and Scott answer your questions! This month - organizing your Git repos, the difference between freelancing and contracting, changing careers, how to deal with spammers and more! Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. Techmeme Ride Home P...

en

Syntax - Tasty Web Development Treats

Hasty Treat - Code Quality Tooling Part 2
In this Hasty Treat, Scott and Wes continue their discussion about code quality tooling - how to get your code extra nice and clean, and the tools that will help you along the way. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax. Show Notes 2:28 Typescript and Types 5:42 Jest and Testing 7:48 Exceptions & Er...

en

Syntax - Tasty Web Development Treats

The Freelance Client Lifecycle - Part 2
In this episode Scott and Wes continue their discussion about the freelance client lifecycle—from design and development, to project hand-off, and everything in between. Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbook...

en

Syntax - Tasty Web Development Treats

Hasty Treat - Code Quality Tooling
In this Hasty Treat, Scott and Wes talk about code quality tooling - how to get your code extra nice and clean, and the tools that will help you along the way. 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 ca...

en

Syntax - Tasty Web Development Treats

The Freelance Client Lifecycle - Part 1
In this episode Scott and Wes talk about the freelance client lifecycle—from gathering requirements, to project hand-off, and everything in between. Techmeme Ride Home Podcast From Techmeme.com, Silicon Valley’s most-read news source, The Techmeme Ride Home podcast is a short daily podcast about the day’s tech news. Mark Zuckerberg called Techmeme the one news source he definitely follows. New episodes are published every day at 5p.m. You can check out the show here, or search for “Techmeme Ride Home” in yo...

en

Syntax - Tasty Web Development Treats

Hasty Treat - Tidying Up Code #MarieKondo
In this Hasty Treat, Scott and Wes talk about tidying up your code - why it’s important and how it can make your (dev) life better. 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...

en

Syntax - Tasty Web Development Treats

Tips for Work Life Balance
In this episode Scott and Wes talk about work life balance. These tips aren’t hard-and-fast - part of the beauty of being a web developer is that you do get to enjoy some flexibility. Work is a big part of our live and these are tips that will hopefully allow you to get the most enjoyment out of both work and life.   Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your comma...

en

Syntax - Tasty Web Development Treats

Hasty Treat - CSS Grid Level 2 aka Subgrid
In this Hasty Treat, Scott and Wes talk about CSS Grid Level 2 - aka subgrid. 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 “tastytr...

en

Syntax - Tasty Web Development Treats

Potluck - Where to start with JS × Freelancing × Cron jobs × Split testing × Frameworks in 2019 × More
It’s another potluck episode in which Wes and Scott answer your questions! This month - thoughts on frameworks for 2019, React Native, when should you start freelancing, where to start with JS, cron jobs, split testing and more! DevLifts — Sponsor DevLifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering two options: The first is Fit.Start - perfect for beginners or those looking to get back at it. Use the coupon code “syntax” to get 50% off the fit.start plan. The s...

en

Syntax - Tasty Web Development Treats

Hasty Treat - CSS Units
In this Hasty Treat, Scott and Wes talk about CSS units (e.g. rems vs ems, px, ch, vmax), when and why you want to be using them, tips and tricks, and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax. Show Notes 2:32 Typography with CSS units 12:04 Pixels 15:17 Viewport units 15:51 ch units 16:3...

en

Syntax - Tasty Web Development Treats

A Look Forward to 2019
In this episode Wes and Scott take a look back at 2018 as well as a look forward to what’s coming in 2019. 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 u...

en

Syntax - Tasty Web Development Treats

Hasty Treat - CSS and JS Pointer Events
In this Hasty Treat, Scott and Wes talk about pointer events in CSS and JS - what they are, their differences, why you may want to use them, potential downfalls and more! Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 3:24 CSS pointer events 10:50 JavaScript pointer events ...

en

Syntax - Tasty Web Development Treats

CSS Layout
In this episode Wes and Scott are talking all about CSS layout - how it works, things to watch out for 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...

en

Syntax - Tasty Web Development Treats

Hasty Treat - Where are they now? Part 2
In this Hasty Treat, Scott and Wes continue their discussion of libraries and tech that where super hot in the past, but not so much any more. Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 3:40 - jQuery UI / jQuery Mobile jQuery UI jQuery Mobile Sencha Touch 6:10 - Flash / ...

en

Syntax - Tasty Web Development Treats

Potluck - Typescript × E-commerce platforms × Job-hopping × Working for agencies × More
It’s another potluck episode in which Wes and Scott answer your questions! This month - thoughts on Typescript, e-commerce platforms vs custom, working for agencies, job-hopping and more! 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. Vue.js In Action - Sponsor Vue.js in Action from Manning Publications is a great way to learn Vue.js. If you’re looking for a book that will teach you Vue.js from start to finish, ...

en