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

When it comes to building user interfaces on the web, React enables web developers to unlock a new world of possibilities. This practical book helps you take a deep dive into fundamental concepts of this JavaScript library, including JSX syntax and advanced patterns, the virtual DOM, React reconciliation, and advanced optimization techniques. By becoming fluent in React, you'll quickly learn how to build better web applications.

Author Tejas Kumar helps you explore the depths of React in plain English, without the typical software engineering jargon, so you can more easily understand how this JavaScript library works. You'll learn how to write intuitive React code that fully understands the nuances and layers of React, unlocking a whole new level of fluency.

You will:

• Understand how React works at a deeper level
• Write React apps while optimizing them along the way
• Build resilient React applications that work well at arbitrary scale
• Create React applications for other platforms adjacent to the web and mobile devices
• Know when to reach for different mechanisms exposed by React, such as reducers versus state versus refs