♾️ Infinite Queries

And the FARM stack

Hey guys!

In today’s newsletter, we’ll cover TanStack Router, Infinite Queries, and a 2024 Roadmap for React. We’ll also dive into the FARM Stack and React Server Components.

Let's get into it! 🤙

⚡️ The Latest In React

🏖️ TanStack Router
TanStack Router offers a fully-featured client-side JavaScript framework. It boasts a mature routing and navigation system with nested layouts and efficient data loading throughout the route tree. Plus, it’s all done in a type-safe way for added reliability.

♾️ How Infinite Queries work
Infinite queries in React Query make implementing endless scrolling easier, similar to single queries in many ways. They’re perfect for handling those "doom-scrolling" pages we all know too well.

🧠 200+ hours of research on AI tools & hacks packed in 3 hours for FREE (ad)
The only AI Crash Course you need to master 20+ AI tools, multiple hacks & prompting techniques in just 3 hours. Register & save your seat now! (100 free seats only)

🗺️ React Roadmap
Roadmap.sh is a super popular site offering roadmaps for various programming languages and technologies. Its 2024 React roadmap covers everything you need to know about React and its ecosystem. While roadmaps aren't necessary to learn a language, they’re great for discovering new areas to explore.

🧑‍🌾 The FARM stack
The FARM stack combines FastAPI, React, and MongoDB for modern web development. It’s built for scalability, with FastAPI handling concurrent requests, React managing complex UIs, and MongoDB distributing data across servers efficiently.

Quick Links

React Server Components

The React team announced React Server Components a while ago now, and whilst they’re not production-ready, they’re expected to be more stable when React 19 releases.

At a high level, React Server Components introduces a brand-new paradigm for building apps. In this new approach, components run exclusively on the server, unlocking some seriously cool possibilities. Imagine writing database queries directly inside your React components! This eliminates the need for complex client-side logic, making apps more efficient and easier to manage.

Before I give a brief explanation, if you’d prefer to watch a video on the topic, I already made a simple tutorial a few months ago. 👇️ 

These components aim to deliver a more modern UX using a server-driven approach, and it’s a game changer compared to traditional Server-side Rendering (SSR). Instead of packing everything into a client-side JavaScript bundle, this could lead to much smaller bundles, making your app leaner and faster.

These are the future, so they’re definitely worth keeping an eye on. They address some key limitations of SSR. When we SSR components today, we get fast page loads as HTML is sent to the browser. But then comes the catch, JavaScript still needs to be fetched for interactivity, leading to a slower experience after that first "hydration" step.

Server Components fix this. They complement SSR by rendering in a lightweight format that doesn’t bloat your JavaScript bundle. Early tests have shown bundle size reductions of up to 29%, making it an exciting prospect for the future of web development.

The Best React Code I Wrote

In my latest video. I dive into the best code I’ve written so far in React! 

It’s an app we built together recently during the livestreams, packed with design patterns and best practices.

I'll walk you through the code and break down how it all came together.

See you next week!

Darius