fate 1.0: The first full Async React Metaframework New in 1.0: * Zero-Config Live Views via SSE * Drizzle Support * “Native” HTTP support (no tRPC) * Void Router * Vite plugin * Clientside Garbage Collection * Performance & scalability improvements https://fate.technology/posts/fate-1.0

fate 1.0 | fate

Source: https://fate.technology/posts/fate-1.0 May 14th2026 byChristoph Nakazawa

fate1.0 is now ready for production use.fatecombines view composition, normalized caching, data masking, and Async React features. The 1.0 release includes live views through Server-Sent Events (SSE), Drizzle support, garbage collection, and more.

Whyfate​

React data fetching is still largely centered around requests. Components fetch independently, requests happen at every level of the component tree, and keeping client state consistent often requires imperative cache invalidation, defensive refetching, or detailed mutation patching logic. As coding agents write more and more of our code, reducing imperative cache management and request-centric state handling becomes more important, not less.fateis designed to eliminate those patterns at the framework level.

fatetakes a different approach: Instead of caching requests,fatecaches normalized objects, shifts thinking to what data is required, and composes declarative view requirements into a single request at the application root. This enables precise optimistic updates, efficient live subscriptions, predictable cache behavior, and deep integration with modern Async React features through a minimal, composable API.

Check out theinitial announcementif you’d like to learn more about whyfateexists!

How doesfatework?​

fatecomposesViewsup to a singleRequestper screen at the root of your application. Actions can be used to issue data mutations. A typical component tree in a React application usingfatemight look like this:

AViewis co-located with your React Components and might look like this:

tsx

import type { Post } from '@org/server/views.ts';
import { UserView } from './UserCard.tsx';
import { useView, view, ViewRef } from 'react-fate';

export const PostView = view<Post>()({
  author: UserView,
  content: true,
  id: true,
  title: true,
});

export const PostCard = ({ post: postRef }: { post: ViewRef<'Post'> }) => {
  const post = useView(PostView, postRef);

  return (
    <Card>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
      <UserCard user={post.author} />
    </Card>
  );
};

AViewRefis a reference to a concrete object of a specific type, for example aPostwith id7. It contains the unique ID of the object, the type name and somefate-specific metadata.fatecreates and manages these references for you, and you can pass them around your components as needed to resolve them against their views.

Then you pass the composed views touseRequestat the root of your app.fatewill suspend and fetch data in a single request.

tsx

import { useRequest } from 'react-fate';
import { PostCard, PostView } from './PostCard.tsx';

export function App() {
  const { posts } = useRequest({ posts: { list: PostView } });
  return posts.map((post) => <PostCard key={post.id} post={post} />);
}

fatedoes not provide hooks for data mutations. Instead you can use actions directly withReact’suseActionStateand React Actions. ALikeButtoncomponent with optimistic updates usingfateActions and an async component library might look like this:

tsx

const LikeButton = ({ post }) => {
  const fate = useFateClient();
  const [result, like] = useActionState(fate.actions.post.like, null);

  return (
    <Button action={() => like({ input: { id: post.id }, optimistic: { likes: post.likes + 1 } })}>
      {result?.error ? 'Oops!' : 'Like'}
    </Button>
  );
};

New Features in 1.0​

Live Views & Lists​

fateinitially shipped with staticuseViewanduseListViewhooks to select and render data, but modern applications often need to update users in real time. 1.0 introduces two new hooks,useLiveViewanduseLiveListView, which efficiently subscribe to live backend updates through Server-Sent Events (SSE) with zero configuration. For example, to listen to changes on aPost, all you have to do is replace the hook:

diff

- const post = useView(PostView, postRef);
+ const post = useLiveView(PostView, postRef);

On the server, you publish updates like this:

tsx

live.update('Post', input.id);

This example updates all subscribed post data for all clients. If you know the exact data that has changed, you can specify which fields changed to minimize the data sent to all subscribed clients:

tsx

live.update('Post', input.id, { changed: ['likes'] });

Similarly, you can replaceuseListViewwithuseLiveListViewto automatically receive updates for new or removed items in a list.

fatewas built with this use case in mind from the beginning, and it naturally works well because of the normalized cache. It efficiently subscribes to changes for specific objects or lists, and only updates the components where data has changed. Because subscriptions are tied to normalized objects and lists rather than requests,fatecan update only the components affected by a change without refetching entire queries. This system uses the mutations pipeline, so adding the live features was mostly about adding support for SSE and keeping the API and setup to a minimum instead of changing the core offate.

You can try out an example atfate-void-example.void.app. Open two tabs, and like a post or add a comment to see the updates live.

Drizzle & Native HTTP support​

fatestarted out with support for tRPC and Prisma. 1.0 ships withDrizzlesupport and no longer requires tRPC through the “native” HTTP transport. This makes it easier to adoptfatein codebases that don’t use tRPC, and allows the community to contribute support for other protocols.

Along with this change,@nkzw/fate/serverwas expanded with generic handlers for data and connection management, which makes it easier to build new database and protocol integrations.

Vite Plugin instead of Codegen​

The initial version offaterequired manually running a code generator every time the server API types changed. With 1.0, there is now a Vite plugin that does this automatically:

tsx

import { fate } from 'react-fate/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    fate({
      module: '@your-org/server/trpc/router.ts',
    }),
  ],
});

Codegen through the CLI remains available for CI or custom workflows.

Cache Lifetime and Garbage Collection​

Inspired byRelay,fatenow includes garbage collection for data in the client cache and list state. Mounted components retain the data they are currently using, and when the components are unmounted,fatewill eventually release them for garbage collection. By default, this keeps data from the last 10 released requests (usually 10 page transitions with fresh data), which makes normal back-and-forth navigation feel instant while still allowing older or unreachable data to be removed from memory.

Fixes​

Besides all the features above, there are also many fixes that went into this release:

• Improved ordering of optimistic and committed list updates with respect to pagination.
• Improved request promise and lifetime handling, so completed request data is no longer retained unnecessarily.
• Added stable view refs to reduce transient ref allocation and avoid unnecessary re-renders.
• Fixed removal of invalid optimistic updates.
• Fixed list cache scoping for arguments, cursors, and nested node views.
• Improved large-list update performance.

App Scaffolding withcreate\-fate​

You can get started using the newcreate\-fatepackage. I recommend using it withVite+:

bash

vp create fate my-app

The interactive CLI allows you to choose from one of four templates. You can also use it directly:

bash

vp create fate my-app --template drizzle # drizzle + trpc
vp create fate my-app --template http # drizzle + http
vp create fate my-app --template prisma # prisma + trpc

These templates let you start with the stack that best matches your preferences.

Stepping Into the Void​

After shipping the first Async React data framework withfateat the end of last year,I was excited to also build an Async React Router.VoidZerois currently buildingvoid.cloud, which comes with a companion metaframework that includes a router. I spent the past two months working on Void, where I had the opportunity to help build a router designed specifically for Async React.

I swapped out React Router for the new Void Router, and built a new example and template that can be used to build apps forvoid.cloud, makingfate+ Void the first metaframework designed for Async React.

Next​

Async React provides primitives for building responsive, interruptible, transition-driven user interfaces, but it also fundamentally changes how React applications are architected and what they are optimized for.

fateis my attempt to explore what a data framework designed for Async React from the ground up can look like, where declarative data models define application behavior and naturally enable scalable, interruptible, responsive user experiences through elegant APIs and framework primitives.

Please try outfateand share your feedback. I’m excited to hear what you think and how it works for you.

Thank you for reading.