Search icon
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
React and React Native - Fifth Edition

You're reading from  React and React Native - Fifth Edition

Product type Book
Published in Apr 2024
Publisher Packt
ISBN-13 9781805127307
Pages 508 pages
Edition 5th Edition
Languages
Authors (2):
Mikhail Sakhniuk Mikhail Sakhniuk
Profile icon Mikhail Sakhniuk
Adam Boduch Adam Boduch
Profile icon Adam Boduch
View More author details

Table of Contents (33) Chapters

Preface 1. Part I: React
2. Why React? 3. Rendering with JSX 4. Understanding React Components and Hooks 5. Event Handling in the React Way 6. Crafting Reusable Components 7. Type-Checking and Validation with TypeScript 8. Handling Navigation with Routes 9. Code Splitting Using Lazy Components and Suspense 10. User Interface Framework Components 11. High-Performance State Updates 12. Fetching Data from a Server 13. State Management in React 14. Server-Side Rendering 15. Unit Testing in React 16. Part II: React Native
17. Why React Native? 18. React Native under the Hood 19. Kick-Starting React Native Projects 20. Building Responsive Layouts with Flexbox 21. Navigating Between Screens 22. Rendering Item Lists 23. Geolocation and Maps 24. Collecting User Input 25. Responding to User Gestures 26. Showing Progress 27. Displaying Modal Screens 28. Using Animations 29. Controlling Image Display 30. Going Offline 31. Other Books You May Enjoy
32. Index

Handling asynchronous state updates

In this final section of the chapter, we’ll look at the common scenario of fetching data asynchronously and setting render priorities. The key scenario that we want to address is making sure that users aren’t interrupted when typing or doing any other interaction that requires immediate feedback. This requires both proper prioritization and handling asynchronous responses from the server. Let’s start by looking at the React APIs that can potentially help with this scenario.

The startTransition() API can be used as a Hook. When we do this, we also get a Boolean value that we can check to see whether the transition is still pending. This is useful for showing the user that things are loading. Let’s modify the example from the previous section to use an asynchronous data-fetching function for our items. We’ll also use the useTransition() Hook and add loading behavior to the output of our component:

let unfilteredItems...
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €14.99/month. Cancel anytime}