#​371 — January 24, 2024

Read on the Web

Together with  Clerk
React Status

Lessons Learned Upgrading to React 18 — If you get the feeling everyone upgrades to using the newest React version and features ASAP, it’s not true. Most teams take a while to do big upgrades (if they even do so at all) so it’s interesting to see the SonarQube team’s story and some issues they ran into.

Phil Nash (SonarSource)

How to Start a React Project in 2024 — There are, of course, many ways, but this well-regarded author explains the pros and cons of a few approaches, including using Vite, Astro, or Next.js.

Robin Wieruch

Clerk Is the Easiest Way to Set Up Auth for Your React App — Get drop-in authentication for your React app using Clerk. Their quickstart guide streamlines integration with ready-to-use components, hooks, and helpers, ensuring a smooth authentication and user management experience that just works.

Clerk sponsor

📅 React Conf 2024: May 15-16 in Lake Las Vegas — Meta and Callstack are hosting a two-day React-dedicated event that’ll be both in person and live streamed for free. You can only sign up for notifications so far, but you can pencil in the date nonetheless. (They say it’s in ‘Henderson’ but Lake Las Vegas is a whole other ball game. An odd choice of venue, IMO.)

Meta

Build a Next.js App in Storybook with React Server Components and Mock Service Worker — How to develop, document, and test RSC apps in isolation, while using MSW to mock network requests.

Michael Shilman

A Comprehensive Guide to React and OpenLayers Integration — How to add and work with interactive maps in your React app by integrating with the established OpenLayers JavaScript mapping library.

Max Dietrich

▶  Gateway to React: The React.dev Story — One of the main participants in the reengineering of React's docs — now available at React.dev — provides an informative and entertaining backstory to the project.

Rachel Nabors (Tech Talks YLD)

▶  How React Server Components Change Everything“Server components completely alter how you write React code and in this video I will talk about all the difference between client and server components, what the pros and cons are, as well as when to use each one.”

Kyle Cook

Prop Drilling and Component Composition — A visual demonstration of how a little restructuring can help you avoid prop drilling (or at least tidy it up). This is from 2023, but we overlooked it at the time.

Alex Sidorenko

Updating Public Next.js Environment Variables Without Rebuilds — A practical approach to updating public environment variables without rebuilding your app.

Rohan Chaturvedi

Communicating with React Native Web Views
Trey Cucco (Close)

🛠  Code, Tools & Libraries

React Email 2.0: Build Better Emails with ReactReact Email is a collection of unstyled components for creating emails using JSX and React (this example shows you the basic idea). v2 extends the tooling side of things somewhat and introduces two new components focused on displaying source code in emails.

Gabriel Miranda (Resend)

react-use: A Large Collection of Useful Hooks — A bumper packed collection, covering things from tracking battery state and geolocation to setting favicons, debouncing, and playing videos.

Va Da and Contributors

rc-table: A Useful React Table Component — A straightforward, lightweight table component for modest data presentation use cases (demo). GitHub repo.

Dumi