#​354 — September 13, 2023

Read on the Web

Together with  Frontend Masters logo
React Status

Making Sense of React Server Components — React Server Components have attracted a lot of attention this year, with Dan Abramov even creating a somewhat technical ‘let’s reimplement RSCs from scratch’ guide to hammer the concepts home. This post, however, demystifies what RSCs are, why they matter, and the opportunities they’re opening up, in an easy to follow way.

Josh W Comeau

How to Pass a Component as a Prop in React — Some different ways to pass a component as a prop in a type-safe manner: passing JSX, using React.ComponentType, and using React.ElementType.

Matt Pocock

Find Your Perfect Course or Learning Path with Frontend Masters — The Exploration Sale is live! Get access to over 200 courses, all with revamped learning paths. There's a slew of new workshops and courses on the way too, covering TailwindCSS, TypeScript, accessibility, algorithms, Angular, JavaScript and much more.

Frontend Masters sponsor

React Suspense in Three Different Architectures — Suspense provides a way to make components more asynchronous and able to wait for some condition (such as loading content from the server) before they render without affecting the rest of the page. This article shows how Suspense can work alongside client-side rendering, server-side rendering, and server components.

Elan Medoff

Server-Side Rendering (SSR) with Bun and ReactBun 1.0, a performance oriented alternative server-side JS runtime, has finally been released. To better understand how it can be employed with React, this case study walks through an example.

Alex Kates

IN BRIEF:

What I Learnt Building a React Toast Component — Emil is the creator of Sonner, a popular toast notifications component.

Emil Kowalski

An Alternative to Using State for React Forms — Making the case for using FormData instead of useState, although there are pros and cons to take into account.

Nirmal Kumar

Well, Crud … The Person Who Can Do That Is Gone! — And yet you still need to get stuff done and ship features. We can help you figure it out and keep it that way. Let’s go!

Test Double sponsor

A Guide to React Portals — Portals let you render some children into a different part of the DOM / outside the current hierarchy.

Temitope Oyedele

A Walkthrough of Creating and Deploying a Next.js 13 App on Azure — How to create a Next.js app with Prettier, ESLint, Husky, Jest, and deploy it on Azure.

Drag13

Challenging Established Norms: Making Component Fetching the Exception
Jenna Smith

🛠 Code and Tools

Next.Nav: VS Code Extension to Work with Next.js App Routes — Provides an interesting way to look at and navigate around the routes available in a Next.js app.

OSLabs Beta

ReacType 17.0: React Apps Without the Dev Time?ReacType—a prototyping tool we have covered periodically in the past—has just released a brand new version with new features including a “collaboration-focused component marketplace”.

Victor Martins

📰 Classifieds

📅 The AI Event of the year is happening this October 8-10 in SF. The AI Engineer Summit congregates 500 founders, developers, and others working with and shipping AI features and apps, including speakers from companies like OpenAI, GitHub, Replit, AutoGPT, and Amazon. You can apply to attend or get a free remote ticket to tune in from anywhere.


💻 Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

React Tag Autocomplete 7.1 — A flexible and accessible tagging component that makes it easy to guide users when choosing tags. See it in action in the demo.

Matt Hinchliffe

React Plock: A 1KB Masonry Grid Component — TypeScript-ready and it’s easy to customize the grid columns and rows for responsive layouts in the style of Unsplash, say.

Renato Pozzi