React Newsletter #330
Storybook 7.0 alpha, React + Vite, and Zustand v4
This issue is sponsored by React Brussels.
The React Brussels Conf is back home in the heart of Europe for its new edition - and the line-up was just revealed! This conference always features some of the best talks of the year, and the Belgian JS vibe promises to last long beyond the conference itself!
Check it out on October 14 (online or offline).
News
Storybook 7.0 Design Alpha
This update comes with small ergonomic improvements that the Storybook team believes will add up to big productivity gains over time.
Highlights: đ Layout edge-to-edge đ Toolbar reorganized âď¸Â 200 redrawn icons đ˘ Form elements refined âĄď¸ Pre-bundled app for speed
Articles
Testable Frontend: The Good, The Bad And The Flaky
Noam Rosenthal (an engineer on the Chrome Team) writes about how to approach the "repeating and legitimately difficult dilemma" of how to organize testing between unit, integration, and E2E testing, and how to test UI components.
Why React Re-Renders
In this article, Josh Comeau helps you build a mental model for when and why React re-renders. You'll also learn how to tell why a specific component re-rendered, using the React devtools.
React Charts Made Easy
Does creating a beautiful and functional Heatmap Chart in less than 50 lines of React code sound mystical to you? (And yes, this includes the imports and component boilerplate.) Here's a blog post that reveals the mystery. [sponsored]
Create a new React app with Vite
In this article, Ashish walks through how to scaffold your React app with Vite, how to enable HMR, and how to deploy your app to Netlify. They also give some brief examples of more advanced Vite features, some of which have helped Vite's popularity take off in recent months.
Advanced React component composition
This article gives a good deep dive on composition in React and outlines the key principles for designing and building reusable components that scale.
RTK Query Endpoint Selectors with Arguments
Amy Blankenship writes about what she's learned by diving deeper into RTK Query and how it's helped her solve some of the problems caused by React Hooks.
Jobs
Senior or Staff Front-end Engineer -- React (100% Remote)
Close.com is looking for 3 experienced individuals that have a solid understanding of React and want to help design, implement and launch major user-facing features. Close is a 100% globally distributed team of ~55 high-performing, happy people that are dedicated to building a product our customers love.
Projects
Zustand v4.0
This state management library (created by the Poimandres team) released v4.0 last month with rewritten TypeScript types, a new API for context usage, a removal of deprecated APIs, and more.
React PDF viewer
A React component to view a PDF document. It's written in TypeScript, and powered by React hooks completely. Created by Phuoc Nguyen.
Videos
The Story of React
6 months ago, we made this 10-minute video to tell the story of how React took over the world, despite many developers hating it at first. The video's now been watched by over 200,000 people, and we think you'll like it too.
Learn React Router v6 In 45 Minutes
Kyle from Web Dev Simplified gives a brief rundown on React Router, including all of the new features in v6. If you're already familiar with React Router, there's not a ton of new info here, but it's a helpful, concise overview that comes with some good examples.