#​392 — July 10, 2024

Read on the Web
Together with  Posthog
React Status

React Flow 12: Build Node-Based Editors and Interactive Diagrams — Now more broadly known as xyflow, this mature library makes it easy to create ‘node-based UIs’ where you want to have numerous interactive components wired together however you choose. Version 12 introduces server side rendering support, dark mode, more hooks and helpers, and better DX via TSDoc.

Moritz Klack and John Robb

Sneaky React Memory Leaks: How the React Compiler Won’t Save You — Closures can lead to memory leaks in React and while the new and exciting React Compiler can tackle a lot of issues and make most codebases more performant, it pays to be aware of the tricky edge cases.

Kevin Schiener

Product for Engineers: A Newsletter Helping Flex Your Product Muscle — Product for Engineers is PostHog’s newsletter helping engineers improve their product skills. Subscribe to get curated advice on building great products, lessons (and mistakes) from building PostHog, and dives into the strategies of top startups.

PostHog sponsor

▶  React 19's use Hook Can Impact App Performance — The new use() hook in React 19 looks great. However, there are some potential issues which require some exploration and explanation, says Jack.

Jack Herrington

Learn Suspense by Building a Suspense-Enabled Library — What better way to learn than to get your hands dirty? Especially when it comes to a topic that’s a little awkwardly documented.

Slava Knyazev

▶  Using React 19 with Both Vite and Then Next.js — The VP of Product at Vercel starts with a client-only React app using Vite and looks at how React 19 can make life better, before moving on to a Next.js example. (32 minutes.)

Lee Robinson (Vercel)

▶  useCallback versus useMemo — While superficially they may seem similar, in just 11 minutes we learn the differences and why referential equality is such an essential concept to grok. Even more fantastic given it’s his first YouTube video!

Jan Hesters

Path to a Clean(er) React Architecture: Domain Logic — The latest part of an ongoing series that takes a React code base with lots of bad practices and refactors it step-by-step.

Johannes Kettmann

📄 Building an Image Slider in React Native using Skia and Reanimated Omowunmi Sogunle

📄 A Brief History of State Management Libraries for React Prabashwara Seneviratne

🛠  Code, Tools & Libraries

TinyBase 5.0: A Reactive Data Store for Local-First Apps — A data store that can act as a reactive backend to your apps. If you want less headache with the backend of your app, this is for you, and includes bindings to React and pre-built reactive components. v5.0 includes a new mergeableStore type that can wrap your data as a Conflict-Free Replicated Data Type (CRDT). Homepage.

James Pearce