What’s New in React 18
This course will teach you what new features React 18 brings, including Suspense which is built on the new React concurrent rendering engine.
What you'll learn
The new features of React 18 will help you update old apps and create new apps in React that improve the user's experience while using fewer resources on their computer. In this course, What’s New in React 18, you’ll learn what the new features are in the released version of React 18. First, you’ll explore the new features in the React 18 release. Next, you’ll discover how easy it is to update your existing apps as well as create new ones that take advantage of features such as Suspense running in concurrent React, as well as React hooks that leverage concurrent rendering. Finally, you’ll learn how to combine multiple components together using the new concurrent features to make your apps better in every way. When you’re finished with this course, you’ll have the skills and knowledge of the new features in React 18 so you can take advantage of these in all your existing and new React apps.
Table of contents
- What’s New and Different in React 18 4m
- Expectations for This Course 2m
- What Is Concurrent Rendering? 2m
- The Motivation for Moving to Suspense for Rendering 3m
- Suspense Is About Moving from Imperative to Declarative Programming 3m
- A Simple React Component Using Suspense 3m
- Required Changes for Concurrent Rendering in React 18 3m
- Takeaways and What’s Missing from Suspense in This Release 1m
- Scaffold a React App with Create React App and Our Course GitHub Repo 3m
- Add Asynchronous Data Retrieval to Our Scaffolded App 2m
- Building out an Asynchronous React App without Suspense 7m
- Add Concurrent Rendering Data API Calls in Our App Component 4m
- Implement Our Special Promise Resource DataApi for Concurrent Rendering 3m
- Refactoring Suspense Elements and Data Using Context 7m
- How to Best Handle Suspense Related Initial Data 5m
- Add Another Suspense Data API for City Details 4m
- Refactor Our Suspense City Details API to React Context 3m
- Update Our Apps UI with a Suspense Boundary for City Details 7m
- Learn How Fired Events Can Update Data Inside Suspense Boundaries 3m
- Nesting Suspense Boundaries in Other Suspense Boundary 3m
- Handling Complex Component Interactions with Suspense and useEffect 4m
- Takeaways 1m
- Introduction to useTransition and useDeferredValue 2m
- Understanding the Basics of useTransition 3m
- Implement useTransition to Improve Our City List App’s UI Experience 6m
- Understanding the Basics of useDeferredValue 2m
- Add a City Search Input Field to Our City List App 4m
- Implement useDeferredValue to Improve UI Performance in Our Search Field 4m
- Takeaways 1m
About the author
Peter is an independent software consultant, specializing in .NET development from 1985 through 2001, as well as an eleven time Microsoft MVP. He was founder and president of Tufden Inc, where he successfully delivered systems for clinic scheduling, insurance company management and medical claim processing. His solutions included delivering a turnkey medical office management system to over 500 customers nationwide. His passion for the computer dates back to elementary school when he joined his ... more