Fluent React

Table of contents

1. Foreword
2. Preface
   1. Conventions Used in This Book
   2. O’Reilly Online Learning
   3. How to Contact Us
   4. Acknowledgments
3. 1. The Entry-Level Stuff
   1. Why Is React a Thing?
   2. The World Before React
      1. jQuery
      2. Backbone
      3. KnockoutJS
      4. AngularJS
   3. Enter React
      1. React’s Value Proposition
      2. Releasing React
      3. The Flux Architecture
      4. Benefits of the Flux Architecture
   4. Wrap-Up: So…Why Is React a Thing?
   5. Chapter Review
   6. Review Questions
   7. Up Next
4. 2. JSX
   1. JavaScript XML?
   2. Benefits of JSX
   3. Drawbacks of JSX
   4. Under the Hood
      1. How Does Code Work?
      2. Extending JavaScript Syntax with JSX
   5. The JSX Pragma
   6. Expressions
   7. Chapter Review
   8. Review Questions
   9. Up Next
5. 3. The Virtual DOM
   1. An Intro to the Virtual DOM
   2. The Real DOM
      1. Pitfalls of the Real DOM
      2. Document Fragments
   3. How the Virtual DOM Works
      1. React Elements
      2. Virtual DOM Versus Real DOM
      3. Efficient Updates
   4. Chapter Review
   5. Review Questions
   6. Up Next
6. 4. Inside Reconciliation
   1. Understanding Reconciliation
   2. Batching
   3. Prior Art
      1. Stack Reconciler (Legacy)
   4. The Fiber Reconciler
      1. Fiber as a Data Structure
      2. Double Buffering
      3. Fiber Reconciliation
   5. Chapter Review
   6. Review Questions
   7. Up Next
7. 5. Common Questions and Powerful Patterns
   1. Memoization with React.memo
      1. Getting Fluent in React.memo
      2. Memoized Components That Still Rerender
      3. It’s a Guideline, Not a Rule
   2. Memoization with useMemo
      1. useMemo Considered Harmful
      2. Forget About All of This
   3. Lazy Loading
      1. Greater UI Control with Suspense
   4. useState Versus useReducer
      1. Immer and Ergonomics
   5. Powerful Patterns
      1. Presentational/Container Components
      2. Higher-Order Component
      3. Render Props
      4. Control Props
      5. Prop Collections
      6. Compound Components
      7. State Reducer
   6. Chapter Review
   7. Review Questions
   8. Up Next
8. 6. Server-Side React
   1. Limitations of Client-Side Rendering
      1. SEO
      2. Performance
      3. Security
   2. The Rise of Server Rendering
      1. Benefits of Server Rendering
   3. Hydration
      1. Hydration Considered Harmful
   4. Creating Server Rendering
      1. Manually Adding Server Rendering to a Client-Only React App
      2. Hydrating
   5. Server Rendering APIs in React
      1. renderToString
      2. renderToPipeableStream
      3. renderToReadableStream
      4. When to Use What
   6. Don’t Roll Your Own
   7. Chapter Review
   8. Review Questions
   9. Up Next
9. 7. Concurrent React
   1. The Problem with Synchronous Rendering
   2. Revisiting Fiber
   3. Scheduling and Deferring Updates
   4. Diving Deeper
      1. The Scheduler
   5. Render Lanes
      1. How Render Lanes Work
      2. Processing Lanes
      3. Commit Phase
   6. useTransition
      1. Simple Example
      2. Advanced Example: Navigation
      3. Diving Deeper
   7. useDeferredValue
      1. Purpose of useDeferredValue
      2. When to Use useDeferredValue
      3. When Not to Use useDeferredValue
   8. Problems with Concurrent Rendering
      1. Tearing
   9. Chapter Review
   10. Review Questions
   11. Up Next
10. 8. Frameworks
    1. Why We Need a Framework
       1. Server Rendering
       2. Routing
       3. Data Fetching
    2. Benefits of Using a Framework
    3. Trade-Offs of Using a Framework
    4. Popular React Frameworks
       1. Remix
       2. Next.js
    5. Choosing a Framework
       1. Understanding Your Project Needs
       2. Next.js
       3. Remix
       4. Trade-Offs
       5. Developer Experience
       6. Runtime Performance
    6. Chapter Review
    7. Review Questions
    8. Up Next
11. 9. React Server Components
    1. Benefits
    2. Server Rendering
       1. Under the Hood
       2. Making Updates
       3. Nuance
    3. Rules of Server Components
       1. Serializability Is King
       2. No Effectful Hooks
       3. State Is Not State
       4. Client Components Cannot Import Server Components
       5. Client Components Are Not Bad
    4. Server Actions
       1. Forms and Mutations
       2. Outside of Forms
    5. The Future of React Server Components
    6. Chapter Review
    7. Review Questions
    8. Up Next
12. 10. React Alternatives
    1. Vue.js
       1. Signals
       2. Simplicity
    2. Angular
       1. Change Detection
       2. Signals
    3. Svelte
       1. Runes
    4. Solid
    5. Qwik
    6. Common Patterns
       1. Component-Based Architecture
       2. Declarative Syntax
       3. Updates
       4. Lifecycle Methods
       5. Ecosystem and Tooling
    7. React Is Not Reactive
       1. Example 2: Dependent Values
    8. The Future of React
       1. React Forget
    9. Chapter Review
    10. Review Questions
    11. Up Next
13. 11. Conclusion
    1. Takeaways
    2. Our Timeline
    3. The Mechanics Behind the Magic
    4. Advanced Adventures
    5. Staying Up-to-Date
14. Index
15. About the Author