🚿 Sneaky React Memory Leaks

Yo!

Last time you heard from me was about Project React. Whether or not you have joined, I truly am grateful to have been able to help you become a better React developer.

Today, I'm starting something totally new but with the same goal: a weekly newsletter dedicated to React.

You can expect news, tutorials, and very cool and unique stuff about React that I will find and share on here, delivered to your inbox every week on Thursday.

I truly hope you find this valuable and that this helps you on your developer journey.

Let's do this! 🤙

⚡️ The Latest In React

✍️ Best Practices for Writing Tests with React Testing Library
React Testing Library has become the de facto standard for testing React components, focusing on user interactions rather than implementation details. This post explores common mistakes in using React Testing Library and how specific queries can improve test coverage.

🔧 Can you modify React Props?
Encapsulation is crucial in programming, ensuring components are isolated and reusable. In React, this isolation allows components to be reused efficiently. However, modifying props passed down from the parent component can break encapsulation. So, should you modify props?

💻️ Understanding React Compiler
React's core architecture repeatedly calls your component functions, simplifying its mental model but potentially causing performance issues if those functions are expensive. The React Compiler optimizes your code by converting it into highly efficient, low-level JavaScript. It enhances performance and reduces runtime overhead.

🎨 Open-source animated components built with React
Open-source animated components built with React, TypeScript, Tailwind CSS, and Framer Motion. Fully customizable and free to use.

🚿 Sneaky React Memory Leaks
The React compiler caches values that don't depend on anything else, preventing unnecessary re-allocationsand memory leaks caused by closures. However, it won't prevent all leaks…

How React 19 (Almost) Slowed Down the Internet

A recent blog post by Henrique Yuji, discussed how React 19 almost almost slowed down the entire internet.

React is of course one of the most popular UI frameworks, powering big the likes of Netflix, Airbnb, Discord, and of course, Meta’s giant apps (Facebook, Instagram, WhatsApp). With billions relying on it, any tweak in React has a ripple effect across the web.

Earlier this year, the much-hyped React 19 was announced. But hidden among the shiny new features and developer perks was a tiny change that could easily have been missed and caused performance issues in a huge number of websites.

This tweak disabled parallel rendering of siblings within the same Suspense boundary. Translation? This change could’ve introduced frustrating delays in data fetching, making sites that rely on React load slower.

So, what’s Suspense? It’s a React component that shows a fallback UI until its children finish loading. Normally, React 18.3.1 handles multiple components’ data fetching in parallel within the same Suspense boundary, ensuring speedy load times. But React 19's tweak would make it wait for each sibling’s data fetch to complete one by one—a potential disaster for performance.

If you want to understand the full details behind this change and the rationale, I highly recommend you read the full post.

Fortunately, after a storm of public pushback and heated debates, the React team decided to pause this change.

Combining Zustand with React Query

I just uploaded a new video, where I'll walk you through the correct way to combine Zustand with React Query

Be careful, there is a right way and a wrong way to do it.

The video is already live. Go check it out!

Thanks for reading!

Darius