TanStack made its own database

Today’s issue: 10,000 JavaScript libraries (and counting), RSC limits, and a good excuse to try wearing deodorant.

Welcome to #393.

---

TanStack made its own database

I believe it’s Newton’s 5th Law which states that, “it is mathematically impossible for the number of database providers in the world to ever decrease.”

So we shouldn’t be surprised that the day before Neon announced that they got acquired by Databricks, TanStack and ElectricSQL launched TanStack DB – thus maintaining perfect database equilibrium in the universe ☯️.

What’s unique about TanStack DB? Think of it as the lovechild of TanStack Query and TanStack Store – plus the querying power of a database, the fine-grained reactivity of a UI store, and some robust transaction primitives.

It’s designed to work with sync engines like Electric (hence the partnership), but it also pairs well with GraphQL, REST APIs, or any other homegrown backend you’ve been cooking up in your spare time.

Let’s take a closer look at how it works under the hood:

• Collections are typed sets of objects that you can fill with data however you want – fetch it, sync it, drop it in from a JSON file at 3am. They decouple loading data into your app from binding data to your components, so you can control when and how things show up in the UI.

• Live queries let you query data out of collections reactively. When the underlying data changes in a way that affects the query results, the query is incrementally updated (instead of re-run from scratch).

• Transactional mutators let you batch and stage local changes across your collections – perfect for optimistic UIs that need to feel fast.

Bottom Line: I can already hear the TanStack diehards foaming at the mouth as I type this. But even if you’re just Tan-curious, the promise of real-time sync, fast live queries, and minimal re-renders wrapped up in a smooth DX might be too tempting to pass up.

---

3 key principles for building Multi-Agent AI Systems

Automated test maintenance is both complicated and expensive, so QA Wolf built an AI agent to do the heavy lifting for them.

But that poor little agent quickly got overwhelmed by all the different tasks it had to juggle, and it eventually became too slow and error-prone to be much help.

So QA Wolf rewrote their entire codebase from scratch, using a more sophisticated multi-agent approach that produced faster, more accurate results – and now they want to teach you how to do it.

This free panel discussion on the 3 Principles for Building Multi-Agent AI Systems goes into the technical details of why this approach is so powerful and how you can implement it in your own projects.

Check it out – and learn how to harness multiple agents at once.

---

class UserProfile {
  constructor(name) {
    this.name = name;
    this.friends = [];
  }

  addFriend(friend) {
    this.friends.push(friend);
  }

  render() {
    return {
      name: this.name,
      friendCount: this.friends.length,
      listFriends() {
        return this.friends.map(friend => friend.name).join(', ');
      }
    };
  }
}

const user = new UserProfile('Tyler');
user.addFriend({ name: 'Lynn' });
user.addFriend({ name: 'Ben' });

const profileData = user.render();
console.log(`${profileData.name} has ${profileData.friendCount} friends.`);
console.log(`Friends: ${profileData.listFriends()}`);

---

1. Nir Tamir wrote The Limits of RSC: A Practitioner’s Journey, and I must say that this was a much more technical sequel to An American Tail: Fievel Goes West than I was expecting.

2. Rslib is a new library development tool based on Rspack, created by the ByteDance Web Infra Team. They’ve reportedly built “over 10,000 JavaScript libraries” so far, and they won’t stop until Brendan Eich admits this was all a joke.

3. Frank Fiegel put together this categorized collection of MCP servers.

4. Nikki Manthey wrote about AI’s role in legal document data extraction, including the good, the bad, and the grey area that’s probably definitely gonna lead to more lawsuits. [sponsored]

5. Deno gave an update on Fresh, their simple web framework. TLDR: Fresh 2 should be coming out in September, but you’re still encouraged to start wearing deodorant now.

6. Facebook just released Relay v19.0, which is huge news if 2018 never ended for you.

7. Motion + Cursor just introduced two new features to allow your cursors to react dynamically to your site content – Magnetic cursors and cursor zones.

8. Josh Comeau wrote an article about The Height Enigma, and I’m 90% sure he’s talking about CSS, and not the fact that every guy who claims to be 6 ft tall is actually 5’10”.

---

The bug is in the listFriends method inside the render method.

render() {
  return {
    name: this.name,
    friendCount: this.friends.length,
    listFriends() {
      return this.friends.map(friend => friend.name).join(', ');
    }
  };
}

When listFriends is called, this no longer refers to the UserProfile instance, but instead to the object returned by render. This object doesn’t have a friends property, so this.friends is undefined. To fix this, you could use an arrow function to preserve the correct this context:

render() {
  return {
    name: this.name,
    friendCount: this.friends.length,
    listFriends: () => {
      return this.friends.map(friend => friend.name).join(', ');
    }
  };
}

or if you’re a sicko, you could use .bind.

render() {
  return {
    name: this.name,
    friendCount: this.friends.length,
    listFriends: function() {
      return this.friends.map(friend => friend.name).join(', ');
    }.bind(this)
  };
}