Fluent React: Build Fast, Performant, and Intuitive Web Applications

Cover ....1 Copyright....6 Table of Contents....7 Foreword....13 Preface....15 Conventions Used in This Book....16 OReilly Online Learning....16 How to Contact Us....17 Acknowledgments....17 Chapter 1. The Entry-Level Stuff....19 Why Is React a Thing?....19 The World Before React....20 jQuery....28 Backbone....31 KnockoutJS....36 AngularJS....40 Enter React....44 Reacts Value Proposition....45 Releasing React....51 The Flux Architecture....52 Benefits of the Flux Architecture....53 Wrap-Up: SoWhy Is React a Thing?....54 Chapter Review....55 Review Questions....55 Up Next....55 Chapter 2. JSX....57 JavaScript XML?....57 Benefits of JSX....60 Drawbacks of JSX....60 Under the Hood....61 How Does Code Work?....61 Extending JavaScript Syntax with JSX....65 The JSX Pragma....67 Expressions....67 Chapter Review....68 Review Questions....68 Up Next....69 Chapter 3. The Virtual DOM....71 An Intro to the Virtual DOM....71 The Real DOM....72 Pitfalls of the Real DOM....76 Document Fragments....84 How the Virtual DOM Works....85 React Elements....86 Virtual DOM Versus Real DOM....90 Efficient Updates....92 Chapter Review....94 Review Questions....95 Up Next....95 Chapter 4. Inside Reconciliation....97 Understanding Reconciliation....97 Batching....99 Prior Art....100 Stack Reconciler (Legacy)....100 The Fiber Reconciler....103 Fiber as a Data Structure....104 Double Buffering....106 Fiber Reconciliation....107 Chapter Review....112 Review Questions....113 Up Next....113 Chapter 5. Common Questions and Powerful Patterns....115 Memoization with React.memo....115 Getting Fluent in React.memo....119 Memoized Components That Still Rerender....119 Its a Guideline, Not a Rule....122 Memoization with useMemo....127 useMemo Considered Harmful....129 Forget About All of This....135 Lazy Loading....136 Greater UI Control with Suspense....139 useState Versus useReducer....141 Immer and Ergonomics....144 Powerful Patterns....146 PresentationalContainer Components....147 Higher-Order Component....148 Render Props....155 Control Props....157 Prop Collections....158 Compound Components....160 State Reducer....164 Chapter Review....166 Review Questions....166 Up Next....167 Chapter 6. Server-Side React....169 Limitations of Client-Side Rendering....169 SEO....169 Performance....170 Security....173 The Rise of Server Rendering....175 Benefits of Server Rendering....175 Hydration....176 Hydration Considered Harmful....177 Creating Server Rendering....178 Manually Adding Server Rendering to a Client-Only React App....178 Hydrating....180 Server Rendering APIs in React....181 renderToString....181 renderToPipeableStream....184 renderToReadableStream....194 When to Use What....196 Dont Roll Your Own....197 Chapter Review....200 Review Questions....200 Up Next....201 Chapter 7. Concurrent React....203 The Problem with Synchronous Rendering....204 Revisiting Fiber....205 Scheduling and Deferring Updates....205 Diving Deeper....208 The Scheduler....208 Render Lanes....212 How Render Lanes Work....213 Processing Lanes....215 Commit Phase....215 useTransition....216 Simple Example....216 Advanced Example: Navigation....217 Diving Deeper....219 useDeferredValue....219 Purpose of useDeferredValue....220 When to Use useDeferredValue....223 When Not to Use useDeferredValue....224 Problems with Concurrent Rendering....224 Tearing....225 Chapter Review....232 Review Questions....234 Up Next....234 Chapter 8. Frameworks....235 Why We Need a Framework....235 Server Rendering....238 Routing....240 Data Fetching....241 Benefits of Using a Framework....244 Trade-Offs of Using a Framework....245 Popular React Frameworks....246 Remix....246 Next.js....255 Choosing a Framework....262 Understanding Your Project Needs....262 Next.js....263 Remix....263 Trade-Offs....264 Developer Experience....265 Runtime Performance....265 Chapter Review....266 Review Questions....267 Up Next....267 Chapter 9. React Server Components....269 Benefits....270 Server Rendering....271 Under the Hood....273 Making Updates....281 Nuance....286 Rules of Server Components....287 Serializability Is King....287 No Effectful Hooks....288 State Is Not State....288 Client Components Cannot Import Server Components....288 Client Components Are Not Bad....290 Server Actions....290 Forms and Mutations....290 Outside of Forms....291 The Future of React Server Components....292 Chapter Review....292 Review Questions....293 Up Next....293 Chapter 10. React Alternatives....295 Vue.js....295 Signals....297 Simplicity....297 Angular....298 Change Detection....298 Signals....298 Svelte....299 Runes....300 Solid....303 Qwik....304 Common Patterns....306 Component-Based Architecture....306 Declarative Syntax....307 Updates....307 Lifecycle Methods....307 Ecosystem and Tooling....307 React Is Not Reactive....308 Example 2: Dependent Values....311 The Future of React....312 React Forget....314 Chapter Review....315 Review Questions....316 Up Next....316 Chapter 11. Conclusion....319 Takeaways....319 Our Timeline....321 The Mechanics Behind the Magic....322 Advanced Adventures....322 Staying Up-to-Date....323 Index....327 About the Author....336 Colophon....336