finelybook
ADVANCED REACT
What is happening under the hood?
Take your React knowledge to the next level with advanced concepts, strategies, techniques, patterns and in-depth investigations.
Book Description
Take your React knowledge to the next level with advanced concepts, strategies, techniques, patterns and in-depth investigations.
This book is a must if
You’ve gone through the React docs, implemented a few simple apps, and now are wondering: “How can I progress to the next level?”
You’ve been working with React for a few years and you’re confident that you know it inside and out. This book might have a surprise or two for you.
You want to become the go-to person for everything React performance and be the source of in-depth “how things actually work” knowledge in your team.
React docs are very good to start with React. Millions of books, courses, and blogs are out there aimed at beginners. But what to do after you’ve started successfully? Where to go if you want to understand how things work on a deeper level? What to read if you’ve been writing React for a while and beginner or even intermediate-level courses are not enough? There are not many resources available for this. This is the gap this book aims to fill.
What the book aims to provide is the knowledge that allows you to progress from “can implement a basic todo app” to “React guru in my team”. It begins right away with investigating and fixing a performance bug. It digs deep into what re-renders are and how they affect performance. Walks you through how the reconciliation algorithm works, how to deal with closures in React, various composition patterns that can replace memoization, how memoization works, how to implement debouncing correctly, and much more.
The book is very structured. Each chapter is an independent story, investigation, or deep dive focusing on a single topic. However, they are not completely isolated: each chapter builds on the knowledge introduced in the previous chapters. Also, each chapter tries to introduce only the knowledge required to understand the discussed concept, no more. To make the reading easier and more focused.
If your knowledge already extends beyond the simple “todo” app, it’s very likely that you’ll know a lot of the concepts already. For this case, every chapter has a bullet-point list of things you can expect to learn from it at the beginning, and a “Key takeaways” section, with a very short bullet-point summary of the things introduced. Just skimming through these first will give you a good idea of what’s inside.
You can read the book from cover to cover, and I tried to make sure you’ll have fun doing that. Or just focus on things that matter to you the most and skim through the “Key takeaways” sections of the rest of the chapters.
Table of contents
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
Amazon page
