A New React Framework Just Dropped… I'm Impressed!

A new React library has just been released, and I'm really excited about it! Until now, when you wanted to create a React app, you had a choice between Feed and Next.js.

• Feed is the React framework you would use if you want client-side rendering, meaning the code runs on the client.
• If you want server-side rendering, then Next.js is your go-to option, as it supports SSR.

Of course, Next.js isn't the only player; you also have alternatives like Astro, Remix, and Gatsby, but Next.js is by far the most popular. However, I think that could change soon because TanStack Start just got announced!

What's TanStack Start?

When I first decided to make this video, TanStack Start was still in alpha, but now it's actually in beta, which is awesome. TanStack is the same team behind React Query and TanStack Router, both of which have received positive feedback for being incredibly developer-friendly and just downright awesome.

TanStack Start is very similar to TanStack Router, the routing library for React. It's known for its type safety, which means you can use TypeScript to parse all the parameters you receive from navigation like URL paths and query parameters.

The beauty of TanStack Router is that it provides type safety, something that's still missing in Next.js. You can check out the documentation for TanStack Start (link in the description), but I want to show you how easy it is to build a React app with it.

Building a React App with TanStack Start

Here's an example of a full-stack app in just 45 lines of code—how cool is that?

We start by creating a simple function readCount that reads a file (count.tsx). The content of this file is parsed as an integer. Here's a quick look at the code:

function readCount() {
  const count = parseInt(fs.readFileSync("count.tsx", "utf-8"));
  return count;
}

Next, we define an endpoint using createServerFunction for handling GET requests. The result of this endpoint is the readCount function:

const getCountEndpoint = createServerFunction(async () => {
  return await readCount();
});

We also define an updateCount function for handling POST requests, with type validation built-in. Here's how we write to the file on the server:

const updateCount = createServerFunction(async (newCount) => {
  fs.writeFileSync("count.tsx", newCount.toString());
});

Now that we have our server-side functions, let's jump to the client-side. We define a client route with a component, where we can call the server function via the loader function. The loader data is then available in your component using the useLoaderData hook:

function MyComponent() {
  const count = useLoaderData();
  return (
    <button onClick={() => updateCount(count + 1)}>Increment Count</button>
  );
}

The beauty of TanStack Start is that it keeps everything type-safe. When the button is clicked, it calls the updateCount function from the backend, invalidates the router, and reloads the data. The UI is updated seamlessly.

My Personal Website

By the way, I've just open-sourced my personal website, which I've been working on for a while. It's SEO optimized and supports rich markdown, meaning you can include React components inside markdown blocks.

Check it out here if you're interested! It's been a fun project, and I'll soon be releasing a video showing you how to set it up.

Conclusion

If you love working with React, be sure to check out my latest video where I share my top 9 custom React hooks. Thanks for reading, and I'll see you in the next one!

Watch the full video here