#415 — January 29, 2025 |
|
Why Did You Render: Patches React to Notify You About Avoidable Re-Renders — Can be used to optimize re-renders in your React app or just to track when and why components are re-rendering. v10.0 now supports React 19 (though the author, now a member of the React team, says it’s incompatible with React Compiler optimized apps). Vitali Zaidman |
💡 Along similar lines, React Scan continues to go from strength to strength, and React Geiger (though not updated in a while) provides an interesting audio based way to 'hear' performance issues. |
The First Newsletter Dedicated to Product Engineers — The fastest growing startups increasingly rely on product engineers. They can both figure out what to build and actually build it. Product for Engineers is dedicated to sharing the skills and strategies needed to succeed in this role. PostHog sponsor |
IN BRIEF:
|
📄 The Open-Closed Principle in React: Building Extensible Components Christian Ekrem 📄 Inspecting React Server Component Activity with Next.js Ben Blackmore 📄 How to Build Beautiful React Native Bottom Tabs Oskar Kwaśniewski (Expo Blog) 📄 How to Build a CMS with React Admin Thibault Barrat (Marmelab) |
🛠 Code, Tools & Libraries |
React Select 5.10: A Flexible Select Input Control — Supports things like option groups, portals, animations, multiselect, and autocompletion. Accessible too. There are plenty of examples on the homepage to check out. (GitHub repo.) Jed Watson |
Unpic 1.0: A Toolkit for Displaying Images on the Web — A family of components and libraries for working with images on the Web, whether it’s through components for many different frameworks or working with images hosted on many different providers and CDNs. Matt Kane |
React Form Builder with Drag-and-Drop UI & Built-In JSON Schema Editor — An extensible React form builder component that outputs JSON schemas for form structure and design. Seamlessly integrates with any backend. Learn more. SurveyJS sponsor |
React-Reverse-Portal 2.2: Build An Element Once, Move It Anywhere — Reverse portals do the opposite of usual portals (which let you send the rendered output of an element to a DOM node of your choice) .. so you can pull rendered elements from elsewhere into a location within your React tree. HTTP Toolkit |
☎︎ react-international-phone: A Phone Number Input Component — Not only can you pick a country, it can also guess the country from a number, where possible. react-phone-number-input is another option in this space. Yurii Brusentsov |
Ruck 9.0: A React Webapp Framework for Deno — A lean React-based way to build modern React apps with Deno using features like ESM, dynamic imports, HTTP imports, and import maps with no transpilation or bundling required. Jayden Seric |
React Material Admin: A Dashboard Template Built with Material UI — Originally a paid-for commercial template but now open-sourced. Take note that it’s based on older versions of some libraries. Flatlogic LLC. |
|
|
📢 Elsewhere in JavaScript |
A quick roundup of some of other interesting stories in the broader JavaScript landscape, in case you've missed them:
|