Advanced React

Table of contents

What's inside the Advanced React book

The complete table of contents: a short introduction on how to read the book, then all 16 chapters and 105 interactive examples, every section listed in order.

Read a free chapter

Introduction: how to read this book

  1. 01Intro 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

  2. 02Elements, children as props, and re-renders

    • The problem
    • Elements, Components, and re-renders
    • Children as props
    • Key takeaways

  3. 03Configuration concerns with elements as props

    • The problem
    • Elements as props
    • Conditional rendering and performance
    • Default values for the elements from props
    • Key takeaways

  4. 04Advanced configuration with render props

    • The problem
    • Render props for rendering Elements
    • Sharing stateful logic: children as render props
    • Hooks replaced render props
    • Key takeaways

  5. 05Memoization 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

  6. 06Deep 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

  7. 07Higher-order components in modern world

    • What is a higher-order component?
    • Enhancing callbacks
    • Enhancing React lifecycle events
    • Intercepting DOM events
    • Key takeaways

  8. 08React 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

  9. 09Refs: 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

  10. 10Closures 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

  11. 11Implementing 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

  12. 12Escaping 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

  13. 13React 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

  14. 14Data 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

  15. 15Data 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

  16. 16Universal 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
4.8 on Amazon · 4,500+ developers

Ready to actually understand React?

Stop guessing at re-renders and memoization. Get the 16 chapters that explain how React really works.

Read a free chapter

14-day money-back guarantee. Instant download, DRM-free.