Next.js Layouts, Storybook 6.5, and Monorepos in JavaScript
This issue is sponsored by Retool.
Retool just released a brand new React component library that makes is super easy to build any internal tool you can think of -- Stripe refund tools, custom CRMs, analytics dashboards, and more. Retool has easily saved our company 50+ engineering hours so far, and we're big fans.
This RFC outlines "the biggest update to Next.js since it was introduced in 2016." The headline feature here is nested layouts, which shares a lot of similarities with Remix.
After a little back and forth on Twitter with Evan You, Dan Abramov shared some performance improvements for the new React Docs (which are still in beta).
They're calling it they're "biggest release yet", and it comes with exciting new features like interaction testing to verify user behavior in the browser, a new Figma plugin to connect stories to variants, Webpack 5 upgrade for 3x faster startup times, and a new Vite builder for near instant rebuilds.
Robin Wieruch wrote this comprehensive article on monorepos, which covers what monorepos are, tools for creating them, and how to structure monorepo architecture. It also includes a more practical tutorial that walks through how to use React to create applications and shared packages (UI components) within a monorepo.
In this article, Rae Liu wrote about how Airbnb was able to shave 50% off their JavaScript bundling time for all of their web properties by migrating from Webpack to a custom flavor of Metro, a JavaScript bundler for React Native.
In this series, Piyush Sinha goes through a few different tips and tricks for optimizing your React app's performance.
Blueprint is a React-based UI toolkit for the web, developed by Palantir. It's optimized for building complex, data-dense web interfaces for desktop applications which run in modern browsers and IE11.
This is New Relic's official Next.js instrumentation for use with the New Relic Node.js agent, which makes it super easy to set up performance monitoring. It provides instrumentation for server-side rendering via getServerSideProps and middleware. [sponsored]
React Aria is a library of React Hooks that provides accessible UI primitives for your design system. This latest release includes support for React 18, updated dom-helpers, and a few bug fixes.
A Figma plugin (still in beta) that lets you convert your Figma designs into reusable React components.
A simple but multi-functional React comment section component that helps you create a comments section similar to YouTube or Instagram for your React App.
In this 26-minute talk from last month's Reactathon, David K. speaks about how state machines and statecharts can help us visually model and declaratively orchestrate effects, so that we can ditch the useEffect hook and simplify effects in our React apps.