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.
This book is a must if
But why?
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.
Buy Advanced React book
Best-practices, architectures, techniques and performance optimizations - always in your pocket!
- E-book in Epub and PDF format
- 16 chapters of deep dives, investigations and advanced knowledge
- Countless inline and 105 interactive code examples, hand-crafted for every chapter
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
Questions and answers
I'm new to React. Is this book a good fit for me?
The book's target audience is people who are already familiar with React. Ideally, they have implemented an app or two and now want to progress to the next level. If you're a complete beginner, the book may not be the best fit. It starts with investigating a small performance problem right away and assumes that the reader can implement at least a simple "todo" app by themselves.
You'll definitely need the book after a few months into your React journey though 😉
Can I read the book on my Kindle?
Absolutely! The book is in epub format, which Kindle supports. You can use Amazon's "Send to Kindle" service to upload it to any of your Kindle devices.
Will there be a paperback version?
I plan to publish paperback and hardcover versions through Amazon's on-demand publishing service by September 2023. Subscribe to the newsletter below to receive a notification when it's available.
How does the book differ from the blog?
If you've read my blog (https://www.developerway.com), you’ll notice that the content there is similar to what the book offers. This is because the book is built on its content: the information that I’ve been researching, investigating, writing about, and making educational videos about for the last two years. The book is concentrated knowledge backed by research 😊, all packed into an epub file.
So, what’s the difference?
The book's content follows a consistent structure, it has a story flow and introduces concepts gradually. Everything about re-renders was rewritten from scratch to accommodate this. The articles in the blog are more or less random, with information sometimes spread between a few different articles and YouTube videos.
The content in the book is cleaned up, modernized, and has undergone rigorous proofreading. The illustrations are consistent as well. The articles, on the other hand, are not consistent in that regard, and some of them are already a bit outdated.
The book is yours forever and will always be with you. The blog is at the mercy of the internet, the hosting provider, and my ability to remember to pay the bills for it.
Does the book contain any radically new information compared to the blog?
No, and this is intentional. I believe in free access to information. The book is for those who want to read structured, consistent content all in one go without any noise, rather than trying to extract that information from a bunch of blog articles and YouTube videos.
Plus, it’s a great opportunity to show support to the author if you’ve been reading the blog for a while and love it 😉
Do you support Purchasing Power Parity or regional discounts?
If you live in a country with low purchasing power, or are just experiencing financial hardship, and the book is too expensive for you, you can use the code PARITY20 during checkout to get a 20% discount. This offer is only available for the e-book purchased through the website.
Can I share the book with my friends and coworkers?
The book license is for one person only. I would ask you to respect that and not distribute it to others.
Please send a request to support@advanced-react.com if you have any questions or concerns.
I don't like it. Can I get a refund?
I'm sorry to hear that you're not happy with the book! Please send a refund request to support@advanced-react.com within 14 days of purchase.
I would appreciate it if you could provide the reason for the refund, but it's not mandatory.
Newsletter
Subscribe to receive notifications about exclusive sales discounts,
upcoming courses, and other product updates. Unsubscribe at any time.
About the Author
G'day, I'm Nadia! I am a frontend architect, coder, writer, and educator.
I used to work at Atlassian, where I had a chance to be exposed to completely different types of frontend development in various teams, including Atlaskit, Jira Navigation team, Jira Ops team, Jira Frontend Platform team. The last one was responsible for the architecture, builds, deploys, and best practices of the entire Jira frontend repository (millions of lines of code now!). So that was fun times 😅.
After the joys and challenges of working for big tech, three years ago I decided to gain a completely different perspective and joined a small startup called Pyn as a Founding Engineer.
Over the past two years I've been writing a blog dedicated to advanced concepts for React developers (https://www.developerway.com) and have spoken at conferences throughout the world, from Europe to Australia: React Summit in Amsterdam, CODEstantine in Belgrade, ReactConf in Sydney, to name a few.
In summary, when it comes to React, I think I can safely say that I've seen it all.