• Import React
  • Posts
  • 🚨 The Most Important Design Pattern in React

🚨 The Most Important Design Pattern in React

And Replacing React Code with CSS

Hey guys!

Today, we’ll look at why OpenAI moved from Next.js to Remix, modern data fetching in React, replacing React code with CSS, and I'll share a document I put together with the 10 most important design patterns in React.

Let's get into it! 🤙

⚡️ The Latest In React

🆕 What’s new in React 19
React 19 is on the horizon, with a release candidate announced in April. This version stabilizes many experimental features from React 18, focusing on performance and developer experience improvements. Vercel released a blog post on what to expect and how to prepare.

⌨️ What are Type Predicates in TypeScript?
Type predicates in TypeScript look like affirmative sentences but act like return type annotations, giving more control over type checking. With TypeScript 5.5, automatic inference makes them easier to work with, but older codebases still rely on handwritten versions. Here’s why they are useful.

🤔 Why did OpenAI move from Next.js to Remix?
Last week it was announced that OpenAI announced a significant shift in their tech stack, moving ChatGPT from Next.js to Remix. Here are Wes Bos' thoughts on why.

🤖 Modern Data-Fetching in React
Data-fetching strategies in React are closely tied to your choice of architecture, especially whether you're using a SPA or a framework. This post explores how different architectures influence data-fetching approaches and their tradeoffs.

Quick Links

Replacing React Code with CSS

One popular blog post this week shares how we can replace React Code with CSS.

Since the early days of CSS, we’ve always known it as “cascading,” meaning styles flow from parent to child, never the other way around. If you wanted to style a parent based on its children, you'd have to rely on JavaScript, until now.

The new CSS :has() selector changes the game by allowing us to target parent elements based on their child content, and it's now supported by all major browsers.

For example, you can apply pink borders to .card elements with images inside and grey borders to those without, all without touching JavaScript:

.card {
  border-top: 10px solid #f6f7f6;
}

.card:has(img) {
  border-top: 10px solid #fee6ec;
}

While this is an exciting change for styling, it raises questions for React developers. We’ve spent years developing techniques like BEM, SASS, and CSS-in-JS to prevent styles from leaking across component boundaries. So why revert back?

The answer: simplicity. By using :has(), you can eliminate unnecessary React code and reduce re-renders, sometimes improving performance. The full blog post dives into examples of how CSS alone can replace complex React logic, making your apps cleaner and faster.

Companies offer referral bonuses for new hires, but only to their employees - not you. But what if you know the perfect candidate?

Enter Draftboard, a platform where companies make those bonuses public and claimable by anyone. Draftboard gives you a simple and seamless way to share job opportunities from the best companies in the world (SeatGeek, Via, Formlabs, Bilt, Triple Whale, OneSignal, etc.) with your network - and you get paid when they get hired.

React Design Patterns

Yesterday, I uploaded a video showcasing what I believe to be the most important design pattern in React. Honestly, this might just be one of the most important videos I’ve ever made.

I also created a document with 10 more design patterns which are also super important.

Since you’re already a newsletter subscriber, you can find the document here.

See you next week!

Darius