Advanced React: Deep dives, investigations, performance patterns and techniques

Inhaltsverzeichnis des Buches

• Introduction: how to read this book
• Chapter 1. Intro to re-renders
• The problem
• State update, nested components, and re-renders
• The big re-renders myth
• Moving state down
• The danger of custom hooks
• Key takeaways
• Chapter 2. Elements, children as props, and re-renders
• The problem
• Elements, Components, and re-renders
• Children as props
• Key takeaways
• Chapter 3. Configuration concerns with elements as props
• The problem
• Elements as props
• Conditional rendering and performance
• Default values for the elements from props
• Key takeaways
• Chapter 4. Advanced configuration with render props
• The problem
• Render props for rendering Elements
• Sharing stateful logic: children as render props
• Hooks replaced render props
• Key takeaways
• Chapter 5. Memoization with useMemo, useCallback and React.memo
• The problem: comparing values
• useMemo and useCallback: how they work
• Antipattern: memoizing props
• What is React.memo
• React.memo and props from props
• React.memo and children
• React.memo and memoized children (almost)
• useMemo and expensive calculations
• Key takeaways
• Chapter 6. Deep dive into diffing and reconciliation
• The Mysterious Bug
• Diffing and Reconciliation
• Reconciliation and state update
• Why we can't define components inside other components
• The answer to the mystery
• Reconciliation and arrays
• Reconciliation and "key"
• "Key" attribute and memoized list
• State reset technique
• Using "key" to force reuse of an existing element
• Why we don't need keys outside of arrays?
• Dynamic arrays and normal elements together
• Key takeaways
• Chapter 7. Higher-order components in modern world
• What is a higher-order component?
• Enhancing callbacks
• Enhancing React lifecycle events
• Intercepting DOM events
• Key takeaways
• Chapter 8. React Context and performance
• The problem
• How Context can help
• Context value change
• Preventing unnecessary Context re-renders: split providers
• Reducers and split providers
• Context selectors
• Key takeaways
• Chapter 9. Refs: from storing data to imperative API
• Accessing the DOM in React
• What is Ref?
• Difference between Ref and state
• Ref update doesn't trigger re-render
• Ref update is synchronous and mutable
• When can we use Ref then?
• Assigning DOM elements to Ref
• Passing Ref from parent to child as a prop
• Passing Ref from parent to child with forwardRef
• Imperative API with useImperativeHandle
• Imperative API without useImperativeHandle
• Key takeaways
• Chapter 10. Closures in React
• The problem
• JavaScript, scope, and closures
• The stale closure problem
• Stale closures in React: useCallback
• Stale closures in React: Refs
• Stale closures in React: React.memo
• Escaping the closure trap with Refs
• Key takeaways
• Chapter 11. Implementing advanced debouncing and throttling with Refs
• What are debouncing and throttling?
• Debounced callback in React: dealing with re-renders
• Debounced callback in React: dealing with state inside
• Key takeaways
• Chapter 12. Escaping Flickering UI with useLayoutEffect
• What is the problem with useEffect?
• Fixing it with useLayoutEffect
• Why the fix works: rendering, painting, and browsers
• Back to useEffect vs useLayoutEffect
• useLayoutEffect in Next.js and other SSR frameworks
• Key takeaways
• Chapter 13. React portals and why do we need them
• CSS: absolute positioning
• Absolute is not that absolute
• Understanding Stacking Context
• Position: fixed. Escape the overflow
• Stacking Context in real apps
• How React Portal can solve this
• React lifecycle, re-renders, Context, and Portals
• CSS, native JavaScript, form submit, and Portals
• Key takeaways
• Chapter 14. Data fetching on the client and performance
• Types of data fetching
• Do I really need an external library to fetch data in React?
• What is a "performant" React app?
• React lifecycle and data fetching
• Browser limitations and data fetching
• Requests waterfalls: how they appear
• How to solve requests waterfall
• What about Suspense?
• Key takeaways
• Chapter 15. Data fetching and race conditions
• What is a Promise?
• Promises and race conditions
• Race condition reasons
• Fixing race conditions: force re-mounting
• Fixing race conditions: drop incorrect result
• Fixing race conditions: drop all previous results
• Fixing race conditions: cancel all previous requests
• Does Async/await change anything?
• Key takeaways
• Chapter 16. Universal error handling in React
• Why we should catch errors in React
• Remembering how to catch errors in JavaScript
• Simple try/catch in React: how to and caveats
• React ErrorBoundary component
• ErrorBoundary component: limitations
• Catching async errors with ErrorBoundary
• Can I just use the react-error-boundary library instead?
• Key takeaways
• Forewords