TanStack with Kevin Thomas Van Cott and Riccardo Perra

Episode Description

Kevin Thomas Van Cott and Riccardo Perra join Anthony Campolo and Dev Agrawal to explore TanStack Table v9, Pacer, and Hotkeys. They discuss framework-native reactivity, type safety, developer tools, and AI-assisted open-source maintenance.

Episode Summary

TanStack maintainers Kevin Thomas Van Cott and Riccardo Perra join Anthony Campolo and Dev Agrawal to examine how headless libraries work across JavaScript frameworks. Kevin traces Table from React Table’s component origins through its headless redesign and v9 architecture, while Riccardo explains how an enterprise Angular adapter led to ongoing maintenance work. They describe shared Store interfaces, framework-native signals, and the different runtime needs of React-style adapters. A Table demonstration connects explicit feature registration with tree-shaking, extensibility, memory use, and TypeScript performance. The discussion then turns to Pacer’s debouncing, throttling, batching, queues, and concurrency controls, including the distinction between a convenient in-memory utility and a complete server rate-limiting system. Kevin demonstrates Hotkeys’ typed shortcuts, platform modifiers, input handling, recording, conflict policies, and devtools. The group explores shared TanStack tooling, adapter maintenance, framework preferences, and compatibility constraints before comparing AI workflows. Both guests emphasize review and project conventions, while the hosts distinguish AI-assisted documentation from TanStack blog writing and discuss differing approaches to outside pull requests. The episode closes with tentative Pacer and Hotkeys release plans, early Table v10 ideas, and future streams.

Speakers

• Anthony Campolo
• Dev Agrawal
• Kevin Thomas Van Cott
• Riccardo Perra

Chapters

00:00:02 - Introductions and Paths into TanStack

Anthony Campolo introduces Kevin Thomas Van Cott and Riccardo Perra. Kevin describes several years maintaining TanStack Table and building smaller TanStack libraries. Riccardo explains his Angular background and how contributing an adapter led to becoming a co-maintainer. Their introductions establish the practical work behind the projects rather than presenting TanStack as one application framework.

The opening also includes a short conversation about Riccardo’s home in Italy and Anthony’s travels. Kevin explains how a successful adapter contribution grew into continuing collaboration, setting up the discussion of shared infrastructure and support for different frameworks.

00:03:09 - From React Table to Headless Libraries

Anthony recalls interviewing Tanner Linsley when React Table was still the familiar project name. Kevin traces the library’s origins to Tanner’s work at Nozzle, alongside React Query, charts, and other open-source tools. Early React Table offered a ready-made component before later versions moved toward a headless model inspired by projects such as Downshift.

Kevin describes how users’ needs, TypeScript work, and the version-eight rewrite shaped the project. His own work on Material React Table became a route into contributing and eventually taking responsibility for Table. Framework independence emerged through that development history and community participation.

00:08:13 - Angular Adapters and Table v9 State

Riccardo explains that enterprise tables and a shared design system created a need for an Angular adapter. Reusing TanStack’s core avoided rebuilding table behavior, while Angular signals provided a way to integrate with the framework’s reactive model. His contribution became the starting point for deeper work on adapters and state management.

Kevin contrasts that work with the limitations of the previous architecture. Table v9 required changes that could support React Compiler behavior while also improving signal-based frameworks. Riccardo’s ideas helped move the design beyond broad invalidation toward bindings that preserve each framework’s strengths.

00:11:38 - Independent Libraries and Shared Store Interfaces

Anthony asks how the growing TanStack collection fits together. Kevin explains that users can adopt the libraries independently rather than committing to an entire stack. At the same time, maintainers benefit from shared state interfaces and adapter patterns instead of solving the same framework-binding problems separately in every project.

Dev summarizes Store’s role as a common foundation across both libraries and frameworks. The guests distinguish that shared infrastructure from dependencies between unrelated products. Once a reliable adapter pattern exists, applying it to Table, Form, Pacer, or Hotkeys can reduce repeated implementation and maintenance work.

00:15:49 - Framework-Native Signals and Reactive Adapters

Riccardo describes an important change in the signal-framework adapters: they supply native reactive primitives through Store interfaces. The design avoids maintaining a second atom graph that must continually synchronize with Angular, Solid, Vue, or Svelte. Dev asks follow-up questions to distinguish that approach from merely wrapping an independent state container.

Kevin explains that React-style render-phase adapters have different runtime needs and still use Store implementations. The conversation focuses on where state actually lives, how reads participate in native tracking, and why the same headless core can require different bindings to behave efficiently across frameworks.

00:22:02 - Table v9 Features and Tree-Shaking

Kevin shares Table examples and recounts the long development process behind version nine. He highlights changes to memory use, processing, extensibility, and state management. Explicit feature registration lets a small table start with a limited core and add only the sorting, pagination, filtering, grouping, or other capabilities it needs.

The demonstration compares example bundle sizes and explains why including every stock feature tells a different story from a minimal table. Kevin connects the modular design with custom features and typed APIs. The figures illustrate the examples on screen rather than establishing a universal benchmark for every application.

00:28:51 - Library TypeScript and Editor Performance

Anthony connects the discussion to his earlier interview with Tanner and the differences between application TypeScript and library TypeScript. Kevin explains that an API can work correctly while still producing expensive type instantiations, slow editor feedback, or difficult declaration output. Making a feature-rich library pleasant to use requires measuring those costs.

The group discusses compositional types, union-to-intersection patterns, and the practical burden placed on the TypeScript server. Kevin describes iterating on type shapes and inspecting performance rather than treating successful compilation as the only goal. Developer experience becomes part of the library’s performance work alongside runtime behavior.

00:32:25 - Native TypeScript and Adoption Constraints

Dev asks whether the team measured its work with the newer native TypeScript compiler. The speakers discuss multithreading, faster checking, and why improved tooling does not remove the cost of unnecessarily complex types. A faster compiler changes the available budget, but library authors still need to understand the structures they expose.

Framework integration and adapter support also affect when a project can adopt new tooling. The conversation treats TanStack’s demanding type usage as a useful compatibility exercise while acknowledging gaps that prevent immediate migration. The hosts distinguish promising performance gains from a claim that every framework workflow is already supported.

00:36:29 - Pacer Timing Utilities and Concurrent Work

Kevin introduces Pacer through utilities that recur across frontend projects: debouncing, throttling, rate limiting, batching, and queues. Earlier TanStack work and queue implementations provided ideas that could be collected into a reusable library. Riccardo recalls helping with the Angular integration, continuing the theme of sharing mechanisms across adapters.

The examples show how timing and concurrency controls can compose with other libraries. Hover prefetching should avoid unnecessary requests, while queued work may need bounded concurrency or error handling. Kevin presents Pacer as a collection of useful building blocks, with examples intended to make those combinations easier to understand.

00:43:37 - Pacer Lite and Server Rate-Limiting Limits

Dev asks whether libraries that inspired Pacer now depend on it. Kevin explains the lighter Pacer Lite package and the value of reusing small mechanisms without always bringing along the full public state-management layer. The distinction helps maintainers share code while keeping different consumers’ bundle and API needs in view.

The conversation also separates local rate-limiting utilities from production server protection. An in-memory limiter does not automatically coordinate distributed requests or persist state across processes. Async queues and batching can still be useful on servers, but the guests stress the additional infrastructure, documentation, and engineering needed for stronger guarantees.

00:48:08 - Effect, Concurrency, and Pacer’s Release Goals

A question about Effect prompts a comparison of project scope. Dev describes Effect’s structured concurrency and runtime model, while Kevin acknowledges that he has not explored it deeply enough to offer a comprehensive assessment. They discuss possible overlap without announcing a TanStack integration or treating the two projects as interchangeable.

Attention then returns to Pacer’s age, adoption, and path toward a stable release. Kevin describes work on examples, composition, and remaining rough edges. Release goals remain plans rather than completed milestones, and the discussion recognizes that new experiments can continue appearing alongside efforts to stabilize existing libraries.

00:53:14 - Hotkeys and Keyboard Edge Cases

Kevin introduces Hotkeys and explains how a seemingly small shortcut feature can uncover many edge cases. Keyboard layouts, locales, input methods, dead keys, editable fields, and accessibility behavior all complicate a basic key-event handler. Existing libraries also left him wanting a more complete, maintained, and type-safe approach.

The project grew from application code into a TanStack library, followed by contributor reports and many small fixes. Kevin discusses its planned transition from alpha toward beta and possible later stabilization. The account emphasizes lessons from real usage rather than claiming that keyboard shortcuts become trivial once a library is installed.

00:58:47 - Typed Shortcut Combinations and Modifier Order

A light exchange about mathematics leads into the size of Hotkeys’ type-level shortcut space. Kevin explains how unrestricted combinations initially overwhelmed TypeScript. Requiring a consistent order for modifiers reduced the possible strings to a more manageable set while still offering useful suggestions and validation in the editor.

The demonstration connects those types with runtime normalization. Misspelled or invalid shortcuts should produce useful feedback, while differences in case or supported spellings are handled consistently. The aim is to catch mistakes that a handwritten string-based event handler might silently accept, without shipping a large enumeration of every possible key combination.

01:00:36 - Input Handling, Scopes, and Platform Modifiers

Dev asks how shortcuts interact with selection and other contextual behavior. Kevin explains work on ignoring shortcuts while a user types and on handling editable content or accessibility-related elements correctly. Defaults can cover common cases, while applications still need ways to opt out or customize behavior for their own interfaces.

The discussion covers scoping shortcuts to elements or refs, event configuration, and platform conventions. The mod alias maps to Command on macOS and Control on Windows or Linux, while other physical keys retain their own meanings. These distinctions help avoid treating similar-looking keyboard conventions as identical across operating systems.

01:06:15 - Recording Shortcuts and Resolving Conflicts

Kevin shows utilities for presenting shortcuts in a platform-appropriate form and letting users record their own combinations. The embedded demonstration exposes browser-default and iframe limitations, which the speakers distinguish from the intended application behavior. Recording a key combination is only one part of making customization reliable.

Dev asks how applications can surface conflicting assignments. Kevin describes policies that can allow, replace, warn about, or reject conflicts, along with validation and rejection hooks. Devtools make registered shortcuts visible and can trigger actions for debugging. The examples connect user customization with the developer’s need to inspect and explain the resulting configuration.

01:12:08 - Shared TanStack Devtools

The hosts praise the attention given to debugging tools across TanStack libraries. Kevin credits Alem Tuzlak with shared components that made it faster to build consistent devtools across projects and frameworks. The conversation contrasts that reusable foundation with the earlier situation in which tooling was concentrated around React Query.

They exchange Alem’s profile information and mention his work on TanStack AI. He is discussed as someone to invite to a future episode rather than appearing as a speaker here. The guests connect the shared tooling effort with a broader push to make newer libraries easier to inspect, maintain, and stabilize.

01:14:13 - Framework Adapters and Shared Maintenance

The discussion returns to adapter coverage and how much of each library remains framework independent. Kevin explains that the shared core usually contains most of the implementation, while adapters provide the framework-specific bindings. Dedicated Preact support avoids making compatibility mode the only option for that ecosystem.

The group also considers contributions for frameworks such as Alpine and the practical limits of maintaining a broad matrix. Supporting several frameworks involves more than adding package names: examples, bindings, and tooling need attention. Shared patterns make that work more manageable, while community participation can extend coverage beyond the maintainers’ daily tools.

01:17:51 - Personal Framework Preferences

Anthony asks which framework the guests would choose for a new project. Kevin separates his years of professional React experience from his personal interest in Svelte, Solid, Solid 2, and Octane. His ranking is tentative and reflects how much time he has spent with each option rather than a universal recommendation.

Riccardo says most of his work uses Angular, while he would personally favor Solid and then React. The hosts compare those preferences with their own histories and discuss how employer requirements shape day-to-day choices. TanStack’s independent core remains valuable precisely because application frameworks and individual preferences continue to change.

01:23:24 - Framework Versions and Compatibility

A viewer question raises support for older framework versions. Kevin explains that newer adapters generally start from current major versions rather than promising compatibility with every historical release. The discussion also touches on the different integration needs of libraries such as Form and on work that extends beyond client-side rendering.

For newer React integrations, useSyncExternalStore helps explain a React 18 minimum. The speakers are less certain about some other version details, so their remarks should not be treated as a definitive support matrix. Compatibility decisions involve available framework APIs, testing effort, and the maintenance burden of keeping older paths working.

01:25:26 - AI Workflows and Human Review

Dev asks how AI contributes to the growing collection of TanStack libraries. Kevin describes extensive generated-code use alongside careful review, example testing, and human control over public changes. He also uses skills tailored to his GitHub workflow, including rules that keep agents from posting comments without appropriate review.

Riccardo describes a simpler setup focused on preserving project context and coding conventions. Dev discusses his modified OpenCode workflow, and Anthony describes using separate coding agents for implementation and review. The conversation distinguishes these supervised practices from a lights-off factory that writes and merges changes without a person inspecting the result.

01:32:16 - Blog Writing, Documentation, and Outside Contributions

The hosts ask how AI affects written content. Kevin distinguishes TanStack blog prose from documentation assistance and explains the value of retaining a human voice. The discussion of header images and docs does not establish a single content policy for every TanStack contributor or every kind of asset.

They then compare responses to automated pull requests, spam, and security concerns. Different maintainers use different policies, including temporary restrictions or automated closures in some repositories. Anthony argues for keeping useful outside contributions possible, while Riccardo describes his own experience. The group weighs review costs and trust without claiming that all community contributions have been banned.

01:39:15 - Release Plans and Closing

Anthony thanks the guests and asks what listeners should watch for next. Kevin hopes Pacer and Hotkeys can reach 1.0 in the following weeks and says he and Riccardo are already exploring ideas for Table v10. These comments describe active plans and early thinking, rather than firm release dates or features already delivered.

The hosts invite both guests to return for future launches and mention planned Tuesday streams about their own projects. They reflect on Anthony’s earlier Tanner interview and this show’s first TanStack-focused conversation. The episode ends with thanks, a brief request to remain after the broadcast, and the final goodbyes.

Resources and Links

• Kevin Thomas Van Cott on X
• Riccardo Perra on X
• Announcing TanStack Table V9
• TanStack Pacer
• TanStack Hotkeys
• React Query with Tanner Linsley
• Inside TanStack Table V9 Reactivity
• Migrating to TanStack Table V9 (React)
• TypeScript Performance in TanStack Table V9
• Dominik Dorfmeister (TkDodo)
• Alem Tuzlak

Transcript

00:00:02 - Anthony Campolo

Hello everyone, welcome back to AJC and the Web Devs. We got 2 guests with us here today to talk about TanStack. Got a lot of TanStack projects to talk about. You TanStackers always got a million different things you're doing at the same time. Uh, we got Kevin Van Cott and Riccardo. Kevin, why don't you introduce yourself first, and then Riccardo, tell us who you are and what you do.

00:00:27 - Kevin Thomas Van Cott

All right, uh, yeah, hi, I'm, uh, Kevin, uh, Kevin Van Cott. Um, I'm one of the TanStack maintainers, uh, I think for almost 4— it's 3 or 4 years, uh, I think since 2022, uh, I've been helping out with TanStack Table. Um, and that's the main project I've worked on, but Tanner's also let me, uh, start some new TanStack projects from scratch. So if you see like all of the— like just a bunch of small libraries that are all in v0 still, like popping up on the TanStack library list, I'm making some of those.

00:01:15 - Riccardo Perra

Hello there. I'm Riccardo. I have like 5 years in this field. And I mostly work on Angular. Just like 2 years ago, I contacted Kevin to make an Angular adapter of TanStack Table. And here we are. I'm a co-maintainer now.

00:01:40 - Kevin Thomas Van Cott

Yeah. So, pretty much, like—

00:01:43 - Riccardo Perra

pretty similar.

00:01:45 - Kevin Thomas Van Cott

Yeah. We got, like, one I got a PR, like, for a proof of concept of an Angular table adapter. And it was all right. You know, it's like, it worked. But then Riccardo came in and made it, like, work really well, really fast, have, like, good performance, use Angular signals, all, like, the really cool stuff in modern Angular. And then I've pretty much just nerd sniped him for the past 2 years to keep helping out with TanStack. TanStack Table in particular.

00:02:13 - Dev Agrawal

That's how it always goes.

00:02:16 - Anthony Campolo

Real quick, Riccardo, where do you live at?

00:02:19 - Riccardo Perra

I live in Italy.

00:02:21 - Anthony Campolo

Okay. Yeah, I saw you. It was like Sardegna, and I was like, I don't know where that is. I was just in Italy actually a couple of weeks ago, and I am— I'm a quarter Italian, so I'm always happy to learn about the country. Yeah, very cool.

00:02:38 - Riccardo Perra

Where did you want?

00:02:41 - Anthony Campolo

Um, let's see. So Trieste, um, is where we departed for my trip. In the past, I've been to— I went there for my honeymoon. I was in Rome, Florence, Cinque Terre, Bologna, and then, um, Siena, I think, is where we ended. I gotta say, I wasn't a huge fan of Rome, but the rest of the country I thought was amazing.

00:03:03 - Riccardo Perra

You should come in May, I think. If you like sea, you should come here.

00:03:09 - Anthony Campolo

Awesome. Awesome. Sounds good, man. So I actually talked to, I had interviewed Tanner on FSJam back in like 2021. And a big part of that episode was talking about React Table, which was the predecessor to TanStack Table. So could you give us kind of like the big overview of like how this thing developed and kind of went from like a React thing to like now it seems like framework agnosticism is like a huge part of the value prop?

00:03:36 - Kevin Thomas Van Cott

Yeah, I mean, so pretty much, so Tanner was working at a startup. I think he ended up working there for 11 or 12 years called Nozzle, just like with his friends. And from what I understand, he was pretty much the sole developer or sole frontend developer. So he did all the frontend stuff. I think he even started out with Angular. But then switched to React. And when he switched to React, he started to make a whole ton of— he started to move a lot of his work into open source. So React Table, I think, was one of the first ones. Like, he made React Table and React Query and like an old version of React Form, I think, and a few other things. Also something like React Static, or what was that, Dev?

00:04:28 - Dev Agrawal

Charts, I think, was one of the first.

00:04:30 - Anthony Campolo

React Ranger, deep cut. Can't forget that one.

00:04:34 - Kevin Thomas Van Cott

Yeah, and React Ranger and React Charts, as Dev said, which just had a huge comeback. Biggest comeback, surprise comeback of all time. But yes, so he, I think from 20— what, I think from 2015 to like 2020, he was pretty— or yeah, he was pretty much doing all just making all these React packages on their own. Around early 2020, React Query took off and became popular. I think React Table is actually his first one to somewhat take off, like 2018, 2019. But React Table started out as an actual component, like just a pre-built React table component. Where you import like just a component called React Table and you pass it columns, data, and then like 100 different props to try to— oh, hey, Tanner's

00:05:33 - Anthony Campolo

here in the chat. Thank you for watching, man.

00:05:36 - Kevin Thomas Van Cott

Yeah, I'm telling Tanner's whole life story. We should have just had him on. All right. But yeah, I know it started out as like not a headless library, but like a component, prebuilt component that you had to pass 100 different props to customize it how you want. And then it was around 2018 or '19. I think he was inspired by Kent C. Dodds, his— the select library, Downshift. Like that started to popularize or make popular the like the headless, where you just do the hooks and the logic. And like, that's all your library does. And then it gives you the tools to build your own UI and just kind of connect, kind of, you do the connection. And that went well for a while. So that was v7. And then by 2021 or '22, he that's when he really got into the mindset of starting to rewrite everything with TypeScript. I think React Query got rewritten in TypeScript. He saw how well that went. So he did React Table. And then that was like, I had just started following him around that time. Like, I was like a junior mid-level developer. I also wanted to make my own, like, table library, replace some old Material UI table at work. I was like, maybe I should do open source. Or pretty much I was looking at some other deprecated libraries out there, like one called Material Table. I tried to upgrade it to the newest versions of TypeScript and Material UI and stuff like that. I spent 2 weeks on that, saw how hard that was to upgrade something. I was like, I could just build something better from scratch. Then I spent a whole year building my own thing. So, but I built that on top of TanStack Table, and then I kept filing bugs and pull requests and then writing documentation for TanStack, for TanStack Table v8 as it was coming out. And eventually Tanner just kind of like let me become one of the maintainers because he wasn't able to review my PRs fast enough. And that seems to be kind of the story for how a lot of TanStack maintainers become maintainers is you make so many good PRs that they can't get reviewed fast enough, and then we trust you. Um, that's pretty— that's how I got started.

00:08:13 - Anthony Campolo

That's awesome. And then, um, Riccardo, did you want to kind of give a little bit more flesh out how you got involved in this, these particular projects?

00:08:22 - Riccardo Perra

Yeah, actually, um, my company, uh, needed to work on enterprise tables And we had to do some design system for all of these apps. And actually, we didn't want to rebuild all this table from scratch. So, I make my own Angular adapter using TanStack Table on the top. And this was after Angular introduced signals here. So, it was pretty easy in my opinion. And it just worked. So I opened a PR and Kevin approved it, and easy. That was so easy, I think. I don't know. And now I'm just helping him to improve that TanStack Table. Actually, I've worked also on v9, so I got involved in state management things in Table. And just to, I don't know, build all the adapters using signals, I think.

00:09:40 - Kevin Thomas Van Cott

Yeah. So, like, for the latest TanStack Table version 9 release, we had to kind of rebuild the entire state management layer. Number one goal is just to be compatible with the React compiler. So that was the whole thing. And we built it on top of this, at least initially, like 100% on top of TanStack Store. So like, we're building off of a lot of Corbin's work that he did on TanStack Form.

00:10:13 - Anthony Campolo

Oh, nice.

00:10:14 - Kevin Thomas Van Cott

Yeah, years ago. So I got things working for React. And then I kind of just had, like, for a few months, just had a, like, kind of like a to-do of, like, oh, also get it working and, like, improve it for all the signal-based adapters, which is pretty much everything except React. So, like, Angular, Solid, Vue, Svelte kind of— or yeah, those were the ones that we were supporting at least, like, about a year ago. Because the story in version 8 is that, like, especially in, like, Solid, like, TanStack Table v8 barely supported Solid, I'd say, at least. Like, it worked. It wasn't fast. Every time state changed, every single signal fired throughout the entire table, kind of like re-rendering, like losing the advantages of Solid. But then Riccardo came in with all these ideas on how to make it better, how to connect each framework's signals, like, or their actual signals to TanStack Store and make all of our state truly reactive. And then now we're at the point where Solid, Svelte, and Angular and Vue all have better performance than React or React Table Adapter.

00:11:38 - Anthony Campolo

Okay, I have one other kind of high-level question in terms of how these things sit together, then I'll pass it to Dev because he actually knows a lot more about this stuff than me. The sense I'm getting is that React or that TanStack Table is dependent somewhat on TanStack Store, but is it at all related to things like TanStack Start or any other TanStack libraries? Like how much of these do you need to know to use Table since that's the one we're talking about today? Versus which ones you can forget about?

00:12:09 - Kevin Thomas Van Cott

Yeah. I can give a broad-level interview and then maybe Riccardo can go into some details on store. But pretty much all TanStack libraries are made to be independent with one exception and it's just pretty much we've tried to solve state management across all frameworks just once with TanStack Store. It's kind of the basic idea. We were kind of running into the problem where every single one of our TanStack libraries had to like resolve how state management works in every framework. So like there was a lot of friction to get started. Like, like we're solving it differently in Vue Table and Vue Form. Like, why don't we just write a a binding that will have everything just work kind of the same way in all of our TanStack libraries. So that was one of the reasons TanStack Store was made. I think the first 2 libraries were TanStack Router and TanStack Form. We're using— we're just kind of sharing the same state primitives or stores, atoms, that kind of thing. And then I was able— we were able to adopt that for TanStack Table and pretty much every other new TanStack library since, I think, at least the ones that I work on. But yeah, otherwise, yeah, TanStack libraries are made to be independent from each other and compose well together, not be dependent on each other.

00:13:50 - Dev Agrawal

Okay, so what I'm hearing is that TanStack Store kind of like became the state foundation for state management. Everything else just depends on TanStack Store. Like, they don't depend on each other, but everything depends on TanStack Store, which makes it easier to like have one sort of state management solutions across not, not just across all these different projects, but also across the different frameworks. Because like once you have a TanStack Store and Angular adapter. Now it's much, much easier to take all these other projects and have an Angular version of them. Does it— does that sound fair?

00:14:30 - Kevin Thomas Van Cott

Yeah, that's pretty much exactly what's been happening. So, like, like, I've spun up some, like, new libraries, so, like, Hotkeys, for example. And I didn't even have to, like, think about, like, the state management part, like, the small state management stuff that I had to do for that. It's like, oh, we solved this in Table and Pacer and Forms. Let's just copy those patterns and then just build the actual core of the library. It helps us focus on the actual core features of the library pretty much.

00:15:01 - Dev Agrawal

Got it. Okay. Yeah. So, I guess I'd love to hear more about from both of you, especially from Riccardo, about like there are— every framework has their own state management. They all, like everyone except React has adopted signals. But I'm sure there are like small, like minor differences in how each framework does state management and how TanStack Store does state management. And whenever you're building these like adapters for these projects, you would be running into these edges, like how they operate differently. And like, so yeah, I'm curious about like what kind of challenges you run into when trying to, like, combine all of, like, build adapters for every single framework out there?

00:15:49 - Riccardo Perra

Oh, God. Actually, I think the first challenge was to synchronize the state of TanStack Store with the Signal Graph of the reactive framework. But actually, the last solution was a little different. So, every adapter just passed their own implementation of signals. So, in the Angular adapter, we just passed an Angular native signal that will be used to create the TanStack store state. So, actually, now we don't have to synchronize everything from scratch. It's just native SignalStores from the framework you are using. TanStack Store actually is the foundation that exposes only the interfaces. So, it's just like dev dependencies. It's not included in the bundle, as I remember. Kevin?

00:16:55 - Kevin Thomas Van Cott

Yeah. And that was something where we worked through it. We did multiple iterations at the beginning of this year on how TanStack Store was going to work in table particularly. So like, like when you read like, like, I don't know, like table atoms sorting get in our Solid adapter, you're reading an actual Solid signal rather than kind of like our like TanStack store normal getter. But it's still following the TanStack table, like, or TanStack store API patterns. Is that correct, Riccardo? I mean,

00:17:39 - Riccardo Perra

yeah,

00:17:39 - Kevin Thomas Van Cott

that's the way to say it.

00:17:42 - Dev Agrawal

Okay, so, so are you saying that, like, norm— like, okay, when you read, like, the .store.get, inside a Solid memo or maybe inside a computed from Angular, you will get the signal of that native framework. But behind that, what I would imagine is there is also a TanStack store atom that TanStack table is actually updating. And then the state from that atom is being synchronized with the solid signal, and that's how we read the state. So is that what's happening? Okay,

00:18:27 - Riccardo Perra

well, we, we don't create the, the TanStack Store atom in table anymore, at least for the signal frameworks.

00:18:35 - Kevin Thomas Van Cott

Yeah, but let's see, we also had, um, we have writable atoms and derived atoms. I guess we did actually pull it out from the derived atoms too, didn't we? Like at one point that was also still the TanStack store. But I do want to link an article in the chat because we did have a— actually, can I link in the chat? I can join chat.

00:19:04 - Anthony Campolo

You can definitely share in the private chat. I'll include any links in the YouTube description as well so people can find them there.

00:19:18 - Kevin Thomas Van Cott

Uh, okay, man, I, uh, all right, it's letting me post a comment finally, and it might actually not— actually, it won't let me because it's a link. Uh, but it was our second latest. You

00:19:32 - Anthony Campolo

should be able to share it through StreamYard comments.

00:19:36 - Kevin Thomas Van Cott

Yeah, that's what I tried.

00:19:39 - Anthony Campolo

It doesn't let you share links?

00:19:41 - Kevin Thomas Van Cott

No. But if you went to our blog—

00:19:43 - Anthony Campolo

what is it?

00:19:44 - Kevin Thomas Van Cott

Yeah, if you go to our blog posts on tanstack.com, filter by table. It's called Inside TanStack Table V9 Reactivity. And that is where we like wrote how, um, this all works.

00:20:06 - Dev Agrawal

Got it. Okay, so you say it's— it— from what I'm hearing so far, it sounds pretty crazy. Like, so TanStack Table will only ever create the native— the signals native to the framework. It, it will never actually create signals like atoms of TanStack Store. TanStack Store mostly becomes like an interface over the native signals Rather than like its own complete state management solution.

00:20:32 - Kevin Thomas Van Cott

Yeah, for the Signal-based adapters, yes. And then for the React ones, so React, Lit, and Octane and Preact, we call those the render phase adapters pretty much. Those are actually using TanStack Store. Like we import like all the actual implementations from TanStack Store. But pretty much, yeah, for performance, or in order to just work best with like Svelte Runes, Solid Signals and all that, like pretty much it's like dependency injection of how— well, it's not quite dependency injection. I don't know. There's a binding of— well, it is kind of dependency injection anyway. It's like, yeah, it's like an actual Solid Signal getting read.

00:21:27 - Dev Agrawal

Cool. Yeah, no, that's definitely very cool. I had not thought of that possibility that you just completely avoid making any custom signals and you only use the framework native. That's a pretty clever idea. Cool. So I guess, yeah, let's— if there's anything cool you wanted to share about TanStack Table, please do that. And otherwise, we'd love to hear more about like the other projects that you've been working on.

00:22:02 - Kevin Thomas Van Cott

Yeah, sure. I guess I can share my screen and we can just like talk about some of the things that we worked on, especially this year. Sure. For v9. Window. All right, I'm gonna share this window. Here's the— and

00:22:25 - Anthony Campolo

you're gonna want to bump your font up quite a bit. Yeah, you got a big boy monitor, it looks like.

00:22:32 - Kevin Thomas Van Cott

Yeah, was that good enough?

00:22:35 - Anthony Campolo

Yeah, that should be fine.

00:22:36 - Kevin Thomas Van Cott

All right, I might zoom in one more time and actually go wider. There we go.

00:22:45 - Anthony Campolo

Yeah, now you can just bump it up just one more. Yeah, yeah, that's not too bad.

00:22:49 - Kevin Thomas Van Cott

Yeah, um, yeah, so we started out— let's see, I mean, just want to give a little bit of background. Like, I had been working on TanStack Table version 9 kind of for, I think, starting at the end of 2023 through 2024, or what? Well, okay, no, not 2023. Starting in 2024 through 2025. And by Christmas of 2025 last year, I was like, oh man, I've been working on this for over a year and a half and I'm not actually close to like shipping this. But then, then pretty much we went really, really hard in the first like 3 months of the year, January, February, March. Me and then Riccardo just iterated over and over on state management, some type safety improvements, and just like a lot of different things. So I opened up like our migration guide for TanStack Table v9. Like we did like lots of just like along with the state management improvements kind of just came like natural performance improvements. But we also kind of just did general refactors that like lowered memory usage and just like had faster processing. So, you know, like TanStack Tables is a codebase where like it's like a codebase of like easy LeetCode problems almost kind of. Just use a dictionary to make everything faster. I literally went through and did that in a few places. Um, uh, but the one, like, one of the biggest things that, um, the new version has to offer is the tree shaking and extensibility. Um, so one of the cool things is if, like, I open up, like, a basic example, um, I'm gonna go to just our basic here. So here's, like, a small table that doesn't do anything. Um, like in version 8 of TanStack Table, this would have been 16 kilobytes of JavaScript, uh, to just render this thing right here because it has all the code for sorting and pagination, uh, filtering, aggregation, grouping, conflict— like if you need to do like a whole bunch of complicated headers or resizing stuff. All that code's there even if you're not using it. One of the very first things I wanted to work on for TanStack Table is make it even more tree-shakable. It was already a little bit tree-shakable, like row models and stuff like that. We wouldn't include all the client-side filtering logic, just most of the APIs. But with TanStack Table version 9, Now when you start to use the library, it's actually a very bare-bones library. I'm actually testing out— this isn't our code sandbox, this is like our custom. I don't think TypeScript is working here. Let's see if I got StackBlitz open. But the idea is that this is just a basic, about 5 kilobytes of JavaScript. If I start to look for features here, so I do table.setSortingState or something, or that's what it would be. It's not even there. It's like a really bare-bones API. There's still a lot of options, but it's bare-bones. My idea was pretty much, well, let's just take all the features and make them like something that you register and have to import manually. Now if you see this features thing, I just imported it from up here now, right here. Actually use the shorthand for that. Now we've registered the sorting feature where you've imported the code. Then when we create the table, we're just passing in this big object of pretty much code to dependency inject behind the scenes. Now you see all these new sorting APIs. Here's table.setSorting or table.state.sorting. This is the only state now that's being tracked internally. Then if I were to add everything, If I just do like stock features, this is like all the features of TanStack Table. Now you see like all this stuff that's going on. Now this would be like a 20-kilobyte table library. Keeping track of all this different state. All these different APIs. A lot more pagination, filtering, all that stuff. Yeah. Worked for like an entire year just trying to figure out how to get this to work and to work well with TypeScript and not crash TypeScript servers. It was like my learning how to do not just basic app TypeScript. Um, like, it's not like the most complicated TypeScript in the world, like, like you would find in TanStack Router or even TanStack Form, but, um, uh, it was still kind of a challenge.

00:28:51 - Anthony Campolo

It's funny you say that because when Tanner was on FSJam, like, that was one of the things Chris was like the most excited to talk about because he's like, library TypeScript is so different from app TypeScript. So he was like— and then Tanner like was, you know, going into all the nuances of that type thing.

00:29:13 - Kevin Thomas Van Cott

Yeah, I mean, and it's like, um, like when you're working on a library, you don't just write TypeScript to make it work. Like, for a while I had it working, but like every time like I changed something, um, like especially like up here, like with these features, like if I import something new, then like I go down to like start typing like table.state.whatever and it would take like 3 or 4 seconds for anything to show up. It's like, oh, I'm starting to really get close to crashing the TypeScript server for anyone who installs this library. Maybe this wasn't a good idea. But thankfully we were able to figure out all the correct patterns to avoid overwhelming the TypeScript server. Yeah, side effect of this being headless.

00:30:07 - Anthony Campolo

I guess you want to comment on that? I don't entirely get what he's saying here.

00:30:14 - Kevin Thomas Van Cott

Um, I wonder if he's talking about the tree shaking part.

00:30:19 - Anthony Campolo

Or he's also asking, what do you use for TypeScript server benchmarking?

00:30:23 - Kevin Thomas Van Cott

Yeah, so what I did For the most part, actually, let me just— I mean, I had an article where I— let's see. Great image. I had an article where I wrote what was not working in our TypeScript. This is what I did at first that was causing our TypeScript server almost to crash. Anyone familiar with union, the intersection, or just any kind of that type of TypeScript pattern? Anyway, it'll— it kind of grows like, what, big O of n squared or something behind the scenes. So don't use it. But we ended up— it was pretty much number of instantiations of types. Like, how— where was how I measured— how we measured? Generate trace, extend number of times.

00:31:26 - Anthony Campolo

I like how many blog posts you have, by the way, explaining all this stuff. This is one of the things I really appreciate about you guys is how well you communicate all of this stuff.

00:31:36 - Kevin Thomas Van Cott

Yeah, it's one of the few, uh, blog posts I actually got published. I have like 5 others in rough drafts. From like the past few months. But, uh, um, all right, we used the— it was a deterministic— yeah, it was just pretty much number of instantiations, which is like the number of instantiations in those like .dts files that get generated when you do a Vite build or, or whatever. Yeah. Um, Yeah, I don't know. Any more questions, like, on the TypeScript side, I guess?

00:32:23 - Anthony Campolo

Dev?

00:32:25 - Dev Agrawal

No, I think we're good. Yeah, I think making these things properly type safe across different frameworks is, like, a huge challenge of its own. Um, and I guess the, um, did you measure performance with the new native TypeScript compiler as well?

00:32:48 - Kevin Thomas Van Cott

Yeah, and actually, no, it's, uh, well, I measured it a little bit, but I didn't like report on it, um, because the thing is, is that, uh, with the number of instantiations, that's, uh, for single-threaded type checking, that's a huge deal. And then the, the tsgo makes that less of a deal. Or like, it's like, um, it's still like, it's still slower if you have bad types that can't be, um, that takes just way more checking. It's just that tsgo is able to multi-thread through that. And, uh, I don't know, what used to be a 10x slowdown is only like a 2x slowdown, um, from what I remember, um, in the testing. But this was also before tsgo had come out. So I haven't measured since then. I actually haven't even upgraded our TanStack repositories all the way to tsgo yet. Because I'm waiting for 7.1 so that I don't have to disable tsgo just for Svelte and Angular and Vue. And I think there's like 4 or 5 of our adapters that we support that don't work with tsgo yet. Um, it's just kind of annoying to maintain and try to tell which TypeScript version is running in which folder of this whole repo. Astro.

00:34:11 - Anthony Campolo

It'd be interesting, Dev, if you know anyone on the TypeScript team. I've interviewed Orda before, but I'm not sure how involved he is these days. That'll be interesting to talk about tsgo. I don't know anything about all the nuances of that.

00:34:26 - Dev Agrawal

Yeah, the, the really the only thing I know about tsgo is that the biggest performance gains, uh, like Kevin was mentioning, come from like the fact that it can now do multithreading. Um, like going from JavaScript to native, it's by itself is not the biggest, uh, performance gain. It's more that now I think more things can happen in parallel, uh, which is pretty cool. Uh, but at the same time, yeah, if the support is not all the way there, then not everyone can adopt it. Um, I think, I think the, like, all of the TanStack, uh, um, repertoire, I guess, is a pretty, uh, like, with how deep you guys go into TypeScript, I think it's a pretty good way to, like, I guess, measure parity or support. Like, is it, is, is tsgo there yet? Like, there should be a can I use tsgo, um,

00:35:22 - Kevin Thomas Van Cott

Probably. Yeah, I know there was initially like TanStack Form. Corbin found bugs in tsgo. And he thought that it was a bug in TanStack Form. But then by the time it came out as stable, it's like, oh, they actually fixed it. Or whatever. So yeah, then like, I don't think there's been— we've run into problems between tsgo and TS6. Um, since then.

00:35:54 - Dev Agrawal

Cool. Um, yeah, if, uh, I guess if there's any other questions show up in chat about TanStack Table, we can address them. Um, I am very excited to hear about hotkeys and Pacer and some of the new stuff that you guys are doing because it's the— all of these are like very important, very much in need. Use cases that never had great framework-agnostic type-safe solutions. So, I'd love to hear about how these new projects started.

00:36:29 - Kevin Thomas Van Cott

Yeah. I can talk about Pacer a bit. And Riccardo, I think, helped me a bit, at least like a year ago or so, on Pacer. But not as much as he's helped on Table. Uh, or do you remember working or helping that much in Pacer Riccardo? I forget. I know you—

00:36:47 - Riccardo Perra

I think the Angular adapter, the Angular adapter. I think as usually you're

00:36:55 - Anthony Campolo

the Angular guy on the team.

00:36:57 - Riccardo Perra

Yeah, I'm the one.

00:37:00 - Anthony Campolo

Do you know Brandon Roberts?

00:37:02 - Riccardo Perra

Yeah, never met him, but I know him.

00:37:06 - Anthony Campolo

He's— when I have an Angular question, he's my guy. I don't have them often, but he's who I would hit up.

00:37:13 - Riccardo Perra

I see. Yeah,

00:37:14 - Kevin Thomas Van Cott

he's awesome. Yeah, so TanStack Pacer. Like, the story behind this is I was— this is during 2025. I was somewhat stuck working on TanStack Table, trying to figure out all the state management stuff. I was like, let's just like make a new library from scratch where I can experiment with stuff. That's almost literally how this somewhat started. I mean, Because like really, like who needs another like a, like Lodash alternative almost, right? So I mean, I will say almost everything in this library you could write yourself in like 10 to 20 lines of code. But you know, this is like just a collection of utilities that we kind of harvested from other TanStack libraries. Like I ripped code out— or not ripped, I copied code out of TanStack Router, TanStack Query, TanStack Form, and then Tanner's first, I think, library ever, which was called TanStack Swim— or no, it wasn't called TanStack. It was just called Swimmer. But what that did was it was like a job queue kind of thing. Or like it would run jobs in a queue with concurrency. So I pretty much just like, hey, here's like a whole bunch of code we have that, like, it's all really similar. What if we like polished it up and like made it like, like into like a library that was like, had a really nice, easy-to-use interface, had it be like front-end focused. And then I just like cleaned it up and made it good and well documented. Um, and like, it's doing pretty well, I think. I think we have a stats page. So like, you know, it's still in beta, but, um, oh geez, man, we're up to 7 million weekly downloads. I think this is combining all the, um, adapters together. Uh, I think if you look on our just TanStack/Pacer, it's probably half this.

00:39:31 - Anthony Campolo

Up and to the right. Looks good.

00:39:33 - Kevin Thomas Van Cott

Yeah. Yeah, so people are actually kind of liking it. Um, it's, it's, you know, again, it's a kind of a simple library, um, at least for like the, um, uh, like if you— if we're to look at like all the simple ones, like here's pretty much just every single function that's in the library and we just have like one example for all of them. So like there's just a simple classic debounce or like a, like a useDebouncer hook, uh, like you connect this up to a filter text or like a search text box. It debounces a value, that kind of thing. But then it has like every variation, like use debounce callback, use debounce value, where like it's like just reflecting a value but like in a debounced way. So like lots of different just like return signatures. What did Jay Larky say now?

00:40:27 - Anthony Campolo

Oh, it's just normal J-Larky comments. He's funny. It's funny that TanStack is so obsessed with the usage they built their own npm tracker.

00:40:36 - Kevin Thomas Van Cott

Yeah, we built that before, uh, npmx— or that's what it's called, I think— npmx existed. Now I just go— I usually go to that site all the time, but then I didn't want to Google that, so we have our own thing. Uh, so just pull that up. Um, but yeah, you know, we have All the same things for like throttle rate limiting, which actually on the front end, um, like, I don't know, this is like the least needed hook, but like if you need like a global rate limiter, like, um, like I've seen, uh, like, so Dominic at, um, who the TanStack Query maintainer at Sentry— actually, I don't know if he does this. Uh, I know Dominic has started like using TanStack Pacer everywhere at Sentry, and I've like fixed a bunch of bugs mostly for Sentry. But I know they've like started integrating like queues and rate limits kind of like on a global level, like to wrap React Query. So like the last thing that I'm— that we're doing here before like we get TanStack Pacer out all the way to 1.0 is like really like showing how to like use TanStack Pacer in a compositional way with a lot of our other TanStack libraries. I only have 3 of our examples here. Actually have a PR that adds like 30 new examples here for like how to use TanStack Pacer with TanStack Query. Like, I mean, here were some of them that maybe work, but it's like, well, like I want to add like, like every time I hover my mouse over a link, I want to be prefetching it, right? But what What if we want to be a little bit smart about that? And like, if you do this, that shouldn't fetch like 100 things by accident. So let's like to bounce it by like 100 milliseconds. So like you see, like I did this, only it only caused one prefetch on the last thing that was like hovered, that kind of thing. It's like being smart about things like that. You can like use TanStack Pacer to like maybe like rate limit like a global fetch, like from TanStack Query saying like, hey, once you do like 300 calls in 10 seconds, let's stop and regroup. Or you could add it to a queue. This particular utility was adapted from Tanner's first TanStack library called TanStack Swimmer that I mentioned earlier. But pretty much the idea is that you can give it a whole bunch of items or things to do. In the frontend. So like, well, you know, we can add a whole bunch of things, start processing them. It's running with a concurrency of 2. It has like some error handling and stuff like that. Kind of the same as like a TanStack Query mutation. You can be wrapping TanStack Query mutations with this. That kind of thing. Yeah.

00:43:37 - Dev Agrawal

Nice. And you mentioned that you you looked at a lot of other projects like Query and Router and Table and all of them, like those projects had some of these utilities and then you decided to pull them out. So do those projects now depend on TanStack Pacer?

00:43:54 - Kevin Thomas Van Cott

Yes, some of them and maybe the next version of Query, for example. So what we also ended up doing, and this one's— this is actually a little hidden, like behind vanilla actually. Uh, uh, we made like another library called— well, it's like a sister library called TanStack Pacer Lite. Um, so pretty much what happened is that, uh, um, the, the library we made was great, but we, you know, we built it on top of like TanStack Store and, uh, like added every API that like users would need. It's like, well, like, now it's— now the code is like 2 to 3 times as much as the— or like as large as the code that we harvested as we improved it. We don't want to take it back into the library with like all this extra baggage. But we ended up— we also made TanStack Pacer Lite as a package that's still kind of stripped down. So like it doesn't have any internal state management that you read. It's acting like these are kind of a little bit more like the almost like the low-dash debouncers that you'd import, although like, uh, still like with our API service and stuff. Um,

00:45:11 - Anthony Campolo

got a quick question from the chat. Could— should I use Pacer on the server?

00:45:15 - Kevin Thomas Van Cott

Um, I hear people keep doing it, um, and I wrote it, um, initially, uh, so that it could work. It's just that, uh, The thing that people usually want to use on the server is a rate limiter. The thing with stuff like this is that one little JavaScript utility isn't going to protect you how you think it will unless you know what you're doing. There's so much more that goes into rate limiting. It's not just calling one function over and over. It's like you're taking different IP addresses, Well, I don't like— there's so much more that goes into rate limiting. I know like there's companies like Upstash and Unkey and a few others that even like make it their whole business to like, like do all that the right way. So it's like when I hear people saying, oh, I put— I'm going to use a TanStack Pacer rate limiter on my— all my JavaScript endpoints, it's like, ah, that's probably not going to protect you. Yeah, exactly, a persistent store, which I actually— we actually do have the APIs for that. Where like, um, you know, like in the front end you can use local storage or session storage to persist like a rate limiter or like a queue so that you don't like lose anything with page reload and stuff like that. And then on the server it actually pretty much works, uh, I just haven't documented it because I don't really want people to use that, um, or it would take— it actually takes a lot more engineering than just the TanStack Pacer utility to work well on the servers is what is how I should put it. Yeah, we had thought about doing way more server stuff, but it's just kind of not been a priority for me. The one I have heard people use on the server a lot that, that works well for them is the— let's see, I need to change back to React— is the async/queue and batcher that we're talking about earlier. So like the async, yeah, like batcher or querier where it just, you start just like adding stuff in it, it batches and then sends like one request. Like you can even like put this in like a map over a for loop or something of like a whole bunch of API requests you have to do. And that can work pretty well for some people. Yeah, I don't know. Yeah, any other questions on, yeah, TanStack Pacer? Uh, because I'll say where my goal is to hit V1 by the end of the month, but I don't know if that's gonna—

00:48:08 - Anthony Campolo

TanStack Effect when?

00:48:13 - Kevin Thomas Van Cott

I actually like— I'd like to have Effect work well alongside TanStack. It's just that there's so many things that we'd have to rewrite. And then this library wouldn't even be useful in TanStack or in Effect because Effect already does all this stuff. So—

00:48:33 - Dev Agrawal

yeah, that was going to be one of my questions, I guess. Effect has kind of like structured concurrency, like fully built in, uh, into like their, their own runtime, like their own ways of doing concurrency. Um, I guess, have you, uh, how much have you looked at that? And how much like, uh, like is there like some sort of comparison between, uh, how TanStack Pacer approaches concurrency and these sort of things and how Effect kind of like builds into it?

00:49:04 - Kevin Thomas Van Cott

Yeah, I mean, so like pretty much the short answer is like, uh, no, I haven't. Like, uh, Effect has been one of the, I don't know, things where I've always wanted to try it and like it just hasn't been like my priority. But like as it's become more and more popular, I've realized, oh, I probably need to, especially for like backend server code, I should probably be doing, uh, Effect anytime I need to be doing Node.js stuff.

00:49:33 - Dev Agrawal

Yeah, that makes sense. Cool. Yeah. Oh my

00:49:41 - Anthony Campolo

God. Fuzzy Bear is not on the Effect train. It sounds like that's really, I can see how Fuzzy wouldn't be into Effect. Fuzzy likes, he likes to be near the platform. He's all about the platform. Effect is pretty far from the platform. Am I right?

00:49:58 - Kevin Thomas Van Cott

Isn't it the same argument that DHH makes for Rust though? It's like, Rust is terrible if you have to read it, but I don't have to read it. My agents do. And I feel like even people like Theo and pretty much the whole T3 team I've heard say like Effect was hard to learn, but it's really great for their agents. To verify through things.

00:50:26 - Dev Agrawal

Yeah, OpenCode team as well, they've adopted Effect pretty strongly. Yeah, hot takes coming out of Fuzzy.

00:50:39 - Kevin Thomas Van Cott

Oh yeah, was it, uh, yeah, I think it was even Jay Larky who told me about the history of Effect, um, one time at a conference or something. Like, it's, it's just Scala but in JavaScript. And is that right?

00:50:52 - Anthony Campolo

I mean, I've heard people say Scala is pretty great. So, I mean, it's just like, you know, stricter type system for a language that historically has been highly untyped. So makes sense why you'd look towards something like that for, you know, influence to try and get it as far as you can into that direction. You know, I, I was, it took me a while to even get on board with TypeScript, so I'm still not on Effect yet, but, um, I could see the benefit, especially in this kind of aging. I once said that I was against TypeScript for a while until ages came around. Now I'm into it, and it wasn't an inconsistency because for me, I felt that it was inhuman to write TypeScript. But since the humans aren't writing code anymore, I don't have to worry about that.

00:51:33 - Dev Agrawal

That's amazing.

00:51:37 - Kevin Thomas Van Cott

You know, we're all going to have the same opinions of DHH.

00:51:41 - Anthony Campolo

All right, you will be a silly— resistance is futile.

00:51:49 - Dev Agrawal

Yeah, uh, yeah, Pacer looks pretty good, uh, lots of downloads. How long has it been since Pacer is out, and what, what, what do the plans look like to get it to stable?

00:52:00 - Kevin Thomas Van Cott

Yeah, I think I made it last, like, over a year and a half ago, like March 2025. Was when we first released it, and then it's been in beta for a year just because we worked on TanStack Table almost exclusively for much of this year, at least like me. But yeah, we're getting a lot of movement on it now. We're trying to end the year across the TanStack team with most things not in alpha or beta anymore, which I think we've already released 4, or yeah, we've released 4 things as stable as 1.0 stable just this month. And we're hoping for another 4 potentially. So yeah, like, 10Stack no longer alpha or beta. And then as soon as we get to that point, maybe we'll release like 5 new alpha libraries. I don't know. Continue the cycle.

00:53:02 - Dev Agrawal

Right, cool. Um, yeah, uh, I— we, we might get questions, we might get more questions about in the chat, but yeah, uh, what's the, uh, what other projects do— should we talk about?

00:53:14 - Kevin Thomas Van Cott

Uh, yeah, I can talk about, uh, TanStack Hotkeys, uh, if we want.

00:53:20 - Dev Agrawal

Yeah, um,

00:53:22 - Anthony Campolo

and also Riccardo, Riccardo, if you want to hop in at any point, please feel free. I just want to make sure we're not leaving you out of the conversation.

00:53:32 - Riccardo Perra

Oh, no problem at all. I can stay if you want. It's late, but no problem.

00:53:39 - Anthony Campolo

All good. All good.

00:53:41 - Kevin Thomas Van Cott

Yeah.

00:53:42 - Anthony Campolo

Sorry, I meant, I meant if you want to hop into the conversation, like if you have thoughts and you want to insert yourself, feel free to just jump in.

00:53:49 - Kevin Thomas Van Cott

Yeah. Yeah. He's mostly been helping me with With table. Um,

00:53:55 - Anthony Campolo

after this, I would be curious for both of your opinions just on general, um, like use of AI and open source. That could be kind of, uh, something we can conclude with. I'd be curious for both your takes on.

00:54:07 - Kevin Thomas Van Cott

Oh yeah, yeah, for sure. Yeah, so, uh, let's see, are these Solid already? Like, do they work with Solid? Yes. Um, uh, if there'd be one, uh, soon, like by the end of the month. In fact, I think so. Tomorrow we're actually announcing this one moving from alpha to beta, uh, hopefully. I think this one is—

00:54:35 - Dev Agrawal

yeah,

00:54:38 - Kevin Thomas Van Cott

uh, yeah. So this is a really simple library, but when I announced it, I was surprised at how many people, uh, liked it. Um, so the, you know, the, the idea of this library is that, like, whenever you want to go and set up just keyboard shortcuts, it seems really simple. Like, it should just be like 3 or 4 lines of code, like if event.key equals whatever or event.code. Uh, but there's surprisingly just so many edge cases where if you like, especially if you're just using AI saying, hey, set up a bunch of keyboard shortcuts, there's like so many things that are edge cases for like different keyboard layouts, locales, um, you know, like whether an event key, like hotkey, is going to like fire like while someone's like typing in an input already, um, tons of accessibility stuff that you're kind of destroying if you don't do it right, especially with like IME stuff or just different languages, you know, different locales really introduce like a whole bunch of extra stuff. So, you know, I was like working on like an app earlier this year where I needed to set all this up. Also, like a lot of the existing libraries out there, they don't— like they just don't have like a TypeScript safe way to like set up hotkeys. And it's like, what? Why hasn't someone done this? This would be so easy to set up. Though, like one of the few that I found, I think it was like the React Hotkeys Hook library or something. They have a bunch of enums you can import. But like, that's You know, like add like 5 kilobytes to your bundle for every enum of every keyboard shortcut possible or something. And there's your type safety. That might be an exaggeration. But I was actually kind of surprised that it just— like there wasn't something like really high quality and maintained yet. So then I kind of just like harvested a bunch of code that I was working on in the app and tried to put it together for a TanStack library. And I figured it got it just good enough to publish. And then we published it, a whole ton of people liked it. And then I quickly found out how much more complicated than even I thought it was. Like, you know, we've only had like about like 100 or so issues open or not, well, not issues, like issues and pull requests. Um, but like some of them were like, oh wow, I didn't— like apparently for like Macs using like setting up a Shift shortcut that was totally wrong. And we were like, like at least on v0 of the library, it was like we were like recording dead keys and all that kind of stuff. So it's been like, like 100 small things like that, um, fixing like over the past year. Um, yeah, if I didn't say already, like this was like a this year project, like earlier, I think it was February or March where we made, made this public. But yeah, I mean, it's that simple, like, as, like, just like when you want to set up like a hotkey to run any function, here's like a template string of just every single keyboard shortcut possible. We could scroll through the whole thing if you want. But I think that— I think it's down to about 6,000 suggestions of just of everything. And this is all valid. The first time I tried to like set this up using the template string TypeScript, it quickly crashed the TypeScript server and couldn't figure it out. Do you guys know what like The difference between a permutation and a combination is?

00:58:47 - Anthony Campolo

Oh no, I don't have a degree.

00:58:49 - Kevin Thomas Van Cott

Remember math class or stats class? Oh no,

00:58:53 - Anthony Campolo

nope.

00:58:53 - Anthony Campolo

I might, I might.

00:58:57 - Kevin Thomas Van Cott

I forget the difference too, but I remember— no, I remember the difference.

00:59:00 - Anthony Campolo

I'm a musician,

00:59:02 - Kevin Thomas Van Cott

so like a permutation order matters, I think, or other way, other way around, but pretty much like Once you— once we were saying like, hey, you can't do Shift and then Control, you have to do first like Control, then Shift. And we like limited it to like those options. All of a sudden it's like, oh, we just cut down— it went from a like, I don't know, 20 billion possible strings to just 6,000 or something, just setting a defined order of all these modifier shifters. Um, or mod— or yeah, keyboard modifiers set up like a hotkey. But, um, all this stuff is like actually type safe. I forget, uh, what was this, mod like, or mod S or something. Uh, so if you like get a keyboard shortcut wrong, it's actually going to tell you it's wrong. Um, and every valid, uh, keyboard shortcut is act like actually going to work. And like, you're not going to even run into like an uppercase or lowercase thing. Everything's normalized behind the scenes. Like even like spelling control wrong, I think, like if you did this in normal JavaScript, it wouldn't catch it. And like you'd, you just have like a silent bug that you could miss in testing. There we are. Oh, everything's working. Okay. Oh, my browser was freaking out for a second. Uh,

01:00:36 - Dev Agrawal

that's pretty cool. Um, and then so when there's hotkeys, uh, sometimes like hotkeys will have different behavior based on like maybe if I have something selected or where my mouse is. Um, yeah, I, I guess you can— you handle all of that like in the handler itself. Like you have the hotkey and then in the handler you might check for those other things?

01:00:59 - Kevin Thomas Van Cott

Yeah. Actually, one of the edge cases I've had to work surprisingly the most on, and it's taken a lot of code, especially with all the accessibility specs out there, is properly ignoring setup hotkeys when they're supposed to. This is the most simple example here. You're typing here and then, well, let's say I'm not typing here. I'm just doing keyboard shortcuts like here's J. You see I'm using the J. I wonder if Command+K is going to open the TanStack. Well, let's do Command+/. But when I hit J, it's an actual keyboard shortcut. But when I'm typing in here, I want it to actually type J. And if you like set up a— if you don't like set up special logic to ignore it while this input is focused, um, you're going to have that bug where else you're typing, all of a sudden something happens that you didn't intend to happen. Um, so then like TanStack Hotkeys takes care of that automatically. So we have like a, uh, you know, ignore inputs. I think the default is set to auto. But then you could also like set it to true or false manually if you need, if you need to opt out of our auto-detect behavior. But like, it's not just like inputs, you also have to think about, well, like anything that has like a role of button, or is content editable, or there's like a few hundred things around just the accessibility spec you have to get right too. I was actually just working on that earlier today and merged a few PRs with fixes. Yeah. Like other things that like, like the library is doing or lets you do, like scoping hotkeys, like this one is scoped to like only when you like have an active, or like, the tree is active, or focused, like on this div, are these like keyboard shortcuts going to fire, that kind of thing. So like, you can just pass it a, like a React ref, or, or just a DOM element, depending on which adapter you're using. I'm in the React adapter right now. Just turn easily turning on and off hotkeys. You know, I know Theo likes key down instead of key up. I think, well, I think key down is our default for hotkeys, but, you know, being able to change that stuff. Platform stuff, of course, like, you know, everything, like I'm on a Mac right now, setting up whether you're using Command or Control and like just having that like work automatically. That's why we have like this special mod 1, so mod+ S, so Command+ S on Mac, then Windows and Linux uses Control. Prevent default, stop propagation, yeah. Did you have a question?

01:04:27 - Dev Agrawal

No, I was just saying, yeah, I think that was a question earlier in the chat about like Control versus Command. Uh, so mod is Command on a Mac but Control on Windows.

01:04:39 - Kevin Thomas Van Cott

Yeah. Um, yeah, we have some documentation about this already. Um, yeah, so yeah, mod just— um, this is kind of following the convention of a few existing libraries I had seen out there. Um, like, this isn't like a browser spec really. It's just a, uh, this is to say this is kind of a convention that we're kind of following.

01:05:04 - Dev Agrawal

Yeah, okay. But there's also the Windows key on Windows, which sometimes is like the equivalent of Command on a Mac, so it's like confusing.

01:05:14 - Kevin Thomas Van Cott

Yeah, and then like on, on, uh, well, and what you do for that one, it's called Meta. Or like, well, we have this, let's see. Actually, I think the homepage, or no, this homepage. Let's see, I thought I had to get an example, maybe not. It's in the PR that I'm going to be merging. Oh man, I actually want to pull it up though. I was going to show like all the— how things show differently based on platform.

01:05:57 - Dev Agrawal

Yeah, they're all good.

01:06:02 - Kevin Thomas Van Cott

Oh yeah,

01:06:02 - Riccardo Perra

maybe in the guides section, the third one.

01:06:08 - Kevin Thomas Van Cott

Oh, what's that?

01:06:11 - Riccardo Perra

Maybe it's on the guides. I don't remember.

01:06:15 - Kevin Thomas Van Cott

Oh yeah. Oh yeah, all this stuff. Like, like we just have like a whole bunch of utilities for like how things are actually going to look based on like platform. And like, you know, this gets like auto-detected, like you're just able to read this from the browser's navigation agents or something. Like, so we We have some stuff for that. But so actually, like one of the bigger things about this library, I might as well bring this up, is giving your users the power to set their own keyboard shortcuts. And, you know, it's not like a huge, really complicated hook, really. Oh, okay. Stack Blitz, save us.

01:07:13 - Dev Agrawal

Okay, but, but yeah, yeah, so you're saying basically like changing the actual hotkeys, um, yeah, right, which is like halfway towards Vim keybinds.

01:07:28 - Kevin Thomas Van Cott

Yeah, stack. Okay, Stack Blitz. All right, there we go. So, like, in the app I was building, it's like, well, I just want to set this up to work well. Like, I want to let them— so now it's listening. So if I do Option+Shift+R or something, it has recorded that. And when I do that custom keyboard shortcut— oh, that's also— so Command+R also reloads the whole page. And since this is StackBlitz, it doesn't bubble up to prevent all the way. But if this were a real app, it would have— the prevent default would have actually worked. But I actually do run into it not quite working on StackBlitz within a web page. The prevent default, that is.

01:08:18 - Dev Agrawal

Right. But that's StackBlitz's fault, not yours.

01:08:23 - Kevin Thomas Van Cott

Let's see. Now we have some that are— I'm actually triggering the custom shortcut that I did there. I guess last thing about hotkeys, if you want to talk about it, it's like we actually put a bunch of effort into our dev tools on pretty much every library now. But especially like on hotkeys, like being able to debug and see that, like, just all the hotkeys you have set up on the page is like, when you're in a big app with like 100 different hotkeys, it's actually so nice. Or even being able to go and like trigger, like, as long as they don't require parameters or something, being able to like just manually trigger like all these actions that you're testing. And keyboard shortcuts, seeing like, and then like getting warnings if you've set up like conflicting shortcuts. We have that, we have that like in a few, like we have it in the dev tools and we also have some different code modes, um, uh, that have saved me a bit. Um, uh, oh, uh, so I wanted to open up one of those others. Um, I had like what conflict behavior. So like, you know, like I think our default is allow, but or no, sorry, our default is replace. I need to look up our default documentation, but like being able to handle conflicting keyboard shortcuts with either allow, error, replace, warn, just like different, different ways to handle. Things that could be conflicting, either user-caused or maybe you've set up intentional scoped keyboard shortcuts that do multiple things.

01:10:17 - Dev Agrawal

Yeah, that makes sense. And what if, like, so you also allow the user to record their own hotkeys and configure them? Can you also show the user that, hey, that they set up conflicting hotkeys?

01:10:35 - Kevin Thomas Van Cott

Yeah, so this is like, it's like a state pretty much on the hotkey. So like you could just pull that out. Trying to remember if we did this in the kitchen sink example or so. I think I just made this example 2 weeks ago. Let's see. So like if I do this one to option 2, say, oh, I did option 3, so there should be 3 to option 3s. You know what, this example is probably like a good example of this. Like not— oh, I think it's console logging a How do I open? Well, it's console logging a warning that you've set up a conflicting keyword by result and you're supposed to have an— we have an onConflict or onReject, I should say, hook. And I don't think this example had just set that one up yet. But yeah, we have multiple ways to handle that.

01:11:43 - Dev Agrawal

Makes sense.

01:11:45 - Kevin Thomas Van Cott

Let's see. Yeah, we have some validate on reject set message. Oh wait, there was a message somewhere. My screen's just too small. But yeah,

01:11:58 - Dev Agrawal

cool. No, I think I'm especially a big fan of the effort that goes into the dev tools for all these libraries.

01:12:08 - Kevin Thomas Van Cott

Yeah, yeah, for sure. And yeah, if you guys— I forget if you talked to Alem. Before? Or has he been on this show?

01:12:17 - Anthony Campolo

No, he's not. Here's our contact info.

01:12:20 - Anthony Campolo

We would definitely bring him on. Any recommendations from guests are instant allowed.

01:12:27 - Kevin Thomas Van Cott

Yeah. I know he had been on a few things this year. But he's— our TanStack DevTools, we used to have DevTools just for React Query pretty much. And I think just React Query for a while. Like, like none of the other adapters, uh, maybe Solid finally. But, um, uh, about a year ago, Alem joined TanStack. And, um, his— the first thing that, like, he joined TanStack to make TanStack DevTools better. Um, so like he gave us like an entire like component library for like TanStack DevTools. So like everything here is just kind of like using all the same components that the rest of our dev tools for all our other libraries are using. So it's made building like new dev tools go like really fast and work in like every framework.

01:13:23 - Anthony Campolo

This is their handle, right?

01:13:24 - Kevin Thomas Van Cott

Yeah, that's Alem's handle. And now he's also the lead maintainer of TanStack AI, which is becoming like a more and more important thing.

01:13:35 - Anthony Campolo

Yes, I am into that. That would be a great combo.

01:13:40 - Kevin Thomas Van Cott

Yeah,

01:13:42 - Dev Agrawal

cool. Uh, Table, Pacer, Hotkeys— there's like a bunch of amazing stuff coming out of TanStack. I'm really happy to see this.

01:13:52 - Kevin Thomas Van Cott

Oh yeah, um, and things are come— becoming stable. Uh, I know that that's just been one of our, uh— I don't know if like it's been a criticism Or it's just been something people noticed. It's like, oh, like half their libraries are v0. But yeah, things are exciting.

01:14:13 - Dev Agrawal

Nice. So Pacer— sorry, Hotkeys, you said that it should be in beta soon. And it looks like there's already like adapters for all the frameworks.

01:14:26 - Kevin Thomas Van Cott

Oh yeah. So Yeah, we're starting to support a record number of adapters, at least in everything that I'm helping maintain. This is the same adapter list for Table, Pacer, and Hotkeys. Some of them have even more. We could even add a Marco adapter soon, like TanStack Virtual has.

01:14:54 - Anthony Campolo

That's hot.

01:14:57 - Kevin Thomas Van Cott

But, uh, yeah, so like in the past year it's been like a big push for me. Like I, I worked somewhere like a year ago, um, where we were considering using Preact for like a whole bunch of stuff, but then I didn't want to have to import Preact compat just for TanStack, especially for, uh, like it's a library, you know, or like our TanStack libraries outside of router, uh, pretty much just use all the normal React hooks. Alpine. Yeah, there's

01:15:29 - Anthony Campolo

Alpine. I was gonna say Alpine's a deep cut. I once was doing one of these multi-framework type projects and I got up to Alpine and it was just a little too hard. And I'm just like, I got like 6 already. I don't think I'm gonna go down Alpine. But, um, what, what, what makes Alpine interesting? Why do people still use Alpine today?

01:15:49 - Kevin Thomas Van Cott

Oh, I don't know if anyone actually uses Alpine still, except— but we had one contributor for TanStack Table who, like, for over the course of a year kept asking if we could make, like, an Alpine adapter. And then he made one, he made a PR that worked. And then I was just able to clean it up. And this is, you know, I was able to— this is like, as the models were getting better. So using AI, but then I got him to approve it. And like, like, so we do have some expert Alpine user. I didn't use the plural there. But we do have an expert Alpine user using the library and making sure that it works well. Yeah.

01:16:36 - Anthony Campolo

Although I'm dying over here. That's really funny. I'm sorry to all the Alpine fans out there. I'm sure it's a great framework. Uh, Jay Largus says it's a worse version of Vue 2.

01:16:48 - Kevin Thomas Van Cott

Yeah, I mean, it is like the only— well, I mean, so, and it obviously makes sense because it, Alpine has like, uh, what it's trying— like, it, it has its goals of just trying to make building simple rich web pages like pretty easy. Um, like its performance isn't even like, uh, like it's not like they make things like, uh unperformant as like on purpose. But like, like, I was measuring performance of all of our TanStack Table examples, because I actually have imported almost every example for every framework. Alpine definitely was the worst. And it's like the only one that would have some lag on the page depending on which example. Like, don't try to render like 10,000 DOM like row DOM elements or whatever on Alpine. Um, but, uh, well, I think, yeah, and we don't have virtualization for Alpine yet either, I don't think. But

01:17:51 - Anthony Campolo

quick question, actually, just since you're so deep in all these different frameworks for your day-to-day, are you a React guy? Are you using something else? Like, if you were to build a, you know, a greenfield project Where, where are you at today?

01:18:05 - Kevin Thomas Van Cott

Uh, yeah, so, um, I've been a React developer for 7 years. And no one's ever gotten fired for choosing React.

01:18:15 - Anthony Campolo

The truth. I feel like I built my career on React. So I definitely get it.

01:18:21 - Kevin Thomas Van Cott

Yeah, so I'll be— if I were to go in order, though, so like, for me, Uh, Svelte is like, uh, it has kind of traditionally been one of my favorites. Um,

01:18:34 - Anthony Campolo

oh, Dev, Dev's not into it. I was a big— see, I was a big Svelte guy. I, I wrote the very first, and I, I know this is a fact, I wrote the very first blog post about SvelteKit. So I was, I was a big Svelte guy for a while.

01:18:47 - Kevin Thomas Van Cott

All right, nice. I would like rank Svelte first, uh, Solid second. Although Solid 2, these might switch. I just like haven't done enough with Solid 2.

01:19:00 - Anthony Campolo

OK, kind of like the

01:19:03 - Kevin Thomas Van Cott

proof of concept, all of our proof of concept branches on TanStack. And there's Octane that's coming up that maybe that goes to number 1 or 2 or at least top 3.

01:19:14 - Anthony Campolo

Is that Dominic's project?

01:19:16 - Kevin Thomas Van Cott

Yeah, Dominic Gannaway. So, and he was on both the React and Svelte teams before, right? Do I have that right?

01:19:22 - Anthony Campolo

Yeah, we gotta get Dominic on. Dev, do you know Dominic personally?

01:19:26 - Dev Agrawal

Yeah, yeah. Um, great.

01:19:28 - Anthony Campolo

Please get him on the stream. I really want to talk to him. So that's your mission.

01:19:33 - Kevin Thomas Van Cott

Yeah, I want to hear from Riccardo though. His, uh, his favorite—

01:19:36 - Anthony Campolo

yeah, I was gonna say, Riccardo, what's your— where are you at with frameworks these days?

01:19:42 - Riccardo Perra

Okay, so, uh, actually I'm working only on Angular, but I'd use Solid for first, then React, I think, then Angular. Angular is just for work, I think.

01:19:57 - Anthony Campolo

Is that because your work is already comfortable with it and they know how to use it? They have, like, you know, workflows around it?

01:20:05 - Riccardo Perra

Yeah. Actually, most of our projects are on Angular. And we have just 2 projects on React. Then some experimental one on Solid, but that's just experimental. So I just have to use Angular.

01:20:23 - Kevin Thomas Van Cott

Yeah, but yeah, all these adapters though, like, uh, especially from, uh, TanStack Table, like, um, uh, like they had, you know, we had like— they're brought, brought in from the community. Um, so like it wasn't, um— so at least in TanStack Table, like since, uh I don't know, I've been able to kind of like, since we used TanStack Store for most of these, like I've actually been able to figure out, uh, the adapters for hotkeys and pasters kind of on my own, um, without having to reach out, um, to like specific maintainers of these frameworks anymore. Uh, also I've just like learned some things, although I haven't learned much about Ember. Um, that's like, that's our newest one that we support. I

01:21:08 - Anthony Campolo

think Ember's time has passed. We're gonna be honest here. I feel like if Ember was gonna be a thing, it would have been a thing by now.

01:21:16 - Kevin Thomas Van Cott

Yeah, and I mean, I thought it had passed in 2020, but they actually have some good, uh, developers working on it. And like, uh, so like it was one of the core Ember maintainers, uh, who contributed the TanStack Table Ember adapter. It was a couple of them, I think. Was it Nullbox?

01:21:36 - Riccardo Perra

Was it?

01:21:36 - Dev Agrawal

There's one who's active on Twitter.

01:21:38 - Kevin Thomas Van Cott

Nullbox, Oxier, or whatever. Yeah, it was him.

01:21:43 - Anthony Campolo

And I'm open to having someone from Ember on to change my mind. I'm open-minded. So

01:21:49 - Kevin Thomas Van Cott

yeah, I mean, like, I know who

01:21:51 - Anthony Campolo

this is. Yeah, I've been following him for 5 years or so.

01:21:55 - Kevin Thomas Van Cott

Yeah. Yeah, he was great. Um, yeah, uh, so I mean, you know, with all these frameworks, it's like, you know, from a TanStack perspective, like from a TanStack maintainer perspective, like we want to like not be like— by like really we write 95% of our— of the code in just vanilla JavaScript. So like we aren't having— every time we do like a new like adapter here It's not like having to rewrite the library from scratch for that library. It's actually just like a small adapter. That's what we call them. Like where like 5% of the code, less than 5% of the code is like framework specific to set it all up. And as the opinions on every framework come and go and change, like, You know, we're not bought into just React. Like when React is not as cool as Solid 2 or Octane. You know, we have like a— we're placing our bets on every horse.

01:23:05 - Dev Agrawal

Yeah. Frameworks will come and go, but TanStack will be forever.

01:23:09 - Kevin Thomas Van Cott

Exactly.

01:23:12 - Dev Agrawal

Nice. Cool. So, yeah. If— and is there anything else from TanStack that you wanted to share, or should we move on to some more spicy stuff?

01:23:24 - Anthony Campolo

There's kind of an interesting question here. Do you support older versions of some of these frameworks, which may be giving all sorts of breaking changes and stuff? Angular, not Astro. Oh, yeah. I

01:23:36 - Kevin Thomas Van Cott

was going to say Astro. We usually just have to consider the frontend frameworks, except like, you know, for like TanStack Form that also has like extra like specific Remix or React Router or Next.js or TanStack Start adapters where it does some server stuff like on a form submission. Um, but yeah, otherwise it's, uh, yeah, um, uh, front-end stuff. But, um, pretty much when we make a new adapter, we just take the latest major and start supporting it from there. So like this is like still 5 and up. This is obviously— well, Octane doesn't count. Uh, Vue, like TanStack Form still supports Vue 2, and then like TanStack Table v8 supported Vue. No, actually I don't— actually I don't know. I think we take whatever the latest major is and just start supporting from there.

01:24:31 - Anthony Campolo

Um, that's the reasonable thing to do for sure.

01:24:35 - Kevin Thomas Van Cott

Uh, for a long time What was it? Like, we were even like supporting React 16.8 because that made sense to just always— for anything that's like a headless thing that's using just the hooks of React 16.8, we're only doing that. But then we started using the useSyncExternalStore hook in pretty much every React library, including that— that's how TanStack Store works, is a useSyncExternalStore. So Now we pretty much are requiring React 18 for at least everything new that's especially built on TanStack Store. Or did I answer his question? Or yeah, the question.

01:25:21 - Anthony Campolo

Yeah, that should be fine. Yeah.

01:25:25 - Kevin Thomas Van Cott

Spicy.

01:25:26 - Dev Agrawal

Cool. Yeah. So let's— Uh, let's talk about some AI stuff then. I think, um, yeah, it looks like obviously AI has been pretty helpful for like building out all these, uh, new TanStack stuff. And, uh, yeah, like you mentioned, there were some, uh, like people did kind of notice that a lot of new libraries were being shipped and a lot, a lot more libraries are spending time on alpha and beta rather than in stable. But TanStack Start just got its stable release, so that's pretty exciting. What does the AI workflows of you guys look like within TanStack? Do you have software factories like everyone else that is shipping PRs autonomously, or what does the AI usage look like?

01:26:16 - Kevin Thomas Van Cott

I guess I can go first. I want to hear from Riccardo too. When I'm— let's see, I feel like when I'm at work, I'm the AI group guru almost by comparison. And when I'm working on TanStack stuff, I'm like the old school, like reading the code still, like testing every single example, still generating a lot of code with AI. Like, like I do have a AI workflow that's like just gotten more and more refined. Like, but like, it's not like, it's not crazy. Getting a lot of work done, still reviewing a ton, like spending tons of time reviewing code. So like, yeah, it just depends on who I'm around, what I, what it appears that I look like, like I'm on like a far end of the spectrum, depending on who I'm hanging around. I don't know if it's the same for you guys.

01:27:18 - Riccardo Perra

Pretty much the same for me, I think.

01:27:21 - Kevin Thomas Van Cott

What's that?

01:27:23 - Riccardo Perra

Pretty much the same.

01:27:25 - Kevin Thomas Van Cott

Yeah.

01:27:26 - Riccardo Perra

Same here.

01:27:29 - Dev Agrawal

So what kind of, what agents do you use? Do you have custom skills, slash commands?

01:27:36 - Kevin Thomas Van Cott

Yeah, I mean, I've developed like about a dozen, I mean, like skills that I like. Like, you know, I've adapted some from PSEC, some from Matt Pocock, um, and then just written some of my own that like fit like my GitHub workflow and stuff. Um, or like pretty much tell AI, hey, don't go comment on someone's PR I'm reviewing, uh, and look, look like it's a bunch of AI slop. Tell me, like, just give me a report, then let me think through it, then let me respond to people. Some of that, you know, that kind of stuff. Um, like skills to stop the AI from making me look bad, but, uh, and still having it go through me and letting me be the bottleneck, um, for better or worse. Um, I don't know. Yeah, how about you, Riccardo?

01:28:29 - Riccardo Perra

No, actually my workflow is pretty simple and I have made 2 or 3 skills that just write code about my personal opinion, I think, trying to— I don't know. The problem is, I think, many people may do the same prompt, but actually the AI just writes stuff differently. So my skills, just try to keep the project context and write the code just like everyone did before, before the AI. Yeah, just like that.

01:29:20 - Kevin Thomas Van Cott

Yeah, I see you've been working on some like harnesses and stuff.

01:29:27 - Riccardo Perra

Not really, no.

01:29:29 - Kevin Thomas Van Cott

Or I think, uh, or Dev, or Dev, you made like a YouTube video recently that, um,

01:29:35 - Anthony Campolo

Dev works on everything all of the time.

01:29:39 - Dev Agrawal

I'm doing way too many like crazy things. But yes, one of, um, one of, uh, like the agent that I use pretty much daily is a fork of OpenCode with a lot of changes that I've made. Yes, I forked OpenCode.

01:29:55 - Anthony Campolo

Also, JLarky, what the hell is lights-off factory? I have no idea what you're talking

01:30:00 - Dev Agrawal

about. A lights-off factory is basically where like you don't look at the code and the AI is like writing everything and merging things without like, like without human review. So that's why it's lights-off because like you don't see it. You don't need to.

01:30:15 - Anthony Campolo

Okay, this goes along with the software factory. Industry terminology, which I find stupid. So I can see how I wouldn't know about that.

01:30:24 - Kevin Thomas Van Cott

Yeah. I mean, I'll say like across TanStack, we generate more code than ever through AI for sure. But there's still a ton of review that's going on. Like for when you ship library code that, what, tens of thousands or millions of apps are depending on, and something could be your fault. It's still your, your name on the commit message. So I'm always paranoid about that. Yeah, what about you, Anthony? Are you an AI skeptic? Or—

01:31:04 - Anthony Campolo

oh, man, not even the slightest bit. I've been, I've been vibe coding since 2023. What are you talking about? No, I am I'm running Codex and Claude Code, and I tried Groq and Anti-Gravity, and I did Cursor, and I spent like 8 months teaching Copilot to developers at ADP, and I was contractually obligated to teach them that, so I had no other choice. But I would say he's a blockchain fan, can't be AI skeptic. Those 2 things have nothing to do with each other. Complete slander. Slander, Jay Larky. No, my main driver is Codex and I use Claude for like a second opinion. So I like to have 2 agents kind of review each other's work because I find that helps kind of help them each step out of their own thought patterns and then do kind of like an adversarial review. And so that's probably where I'm at. And yeah, I mean, all in on AI. I actually just got hired by AI company, so yeah, I'm big into AI.

01:32:14 - Kevin Thomas Van Cott

Of course.

01:32:16 - Dev Agrawal

Nice. Uh, have you guys been also like using AI for content? Like, I, I know that a lot of the recent blog posts have pretty nice like header images. Um, so it seems like you're probably— you might not be using AI for like writing blog posts But for like images or maybe some of documentation, uh, it looks like it's been helpful in that, in those areas.

01:32:41 - Kevin Thomas Van Cott

Yeah, so like, um, like we've tried to make it a rule that blog posts shouldn't be, uh, written by AI. It's supposed to be like our own words.

01:32:53 - Anthony Campolo

Um, that, yeah.

01:32:55 - Kevin Thomas Van Cott

Um, I know like we, we have had like some blog posts that have, that were like I think earlier in the year that we're a bit, um, or had more assistance on AI for the writing part, but we've kind of like, uh, uh, stopped doing that for like last 3, 4, I don't know.

01:33:12 - Anthony Campolo

Yeah. Dev got burned on that. Yeah. Yeah.

01:33:15 - Kevin Thomas Van Cott

It was like, it was like right before like the, um, I know like the whole thing that came up, I know like Ryan Carniato like started like talking about it. It was like a few weeks before that. I remember. Or like we made it like our own internal role, but I don't like, like for docs, um, those are, uh, a lot of that gets like still like generated. Um, but like, I don't know, there's, it's way different. Like, oh, I feel like blogs and docs are like, have different purposes.

01:33:46 - Anthony Campolo

I totally agree. Yeah. I think using it for docs makes a lot of sense because it can clean it up. It can make it more structured. It can make it easier to find things. JLRK is asking about banning AI issues or PRs from non-maintainers. I think I would be personally very sad if TanStack didn't accept PRs from non-maintainers because I find that trend a little concerning in terms of open source. You know, like I get why, but it's like if they suck, like close them, you know, like you should be able to evaluate a PR well enough to know if it's meaningful or not. And that's like, if you're gonna close it, it's not open source anymore. All right.

01:34:27 - Kevin Thomas Van Cott

I know, depending on the situation and time of year, the maintainers have had like a lot of different opinions.

01:34:37 - Anthony Campolo

Like October, they closed them, you're saying?

01:34:41 - Kevin Thomas Van Cott

Well, so like, like we, like we turned off PRs for a while on TanStack Router. But that, you know, that was like following an incident and— or the incident. And

01:34:55 - Anthony Campolo

hold on, I don't know what the incident is. You have to explain that. Someone— did someone send out malicious PR?

01:35:02 - Kevin Thomas Van Cott

Yeah, pretty much. It was the thing back in May with the npm thing. Or what do you call it? I don't

01:35:11 - Anthony Campolo

know. There's one of these every month. I don't know.

01:35:14 - Kevin Thomas Van Cott

Yeah, Shai Halud or—

01:35:18 - Anthony Campolo

yeah, Shai Halud. Okay, I think I heard about that one.

01:35:22 - Dev Agrawal

What was it, like a supply chain thing?

01:35:23 - Kevin Thomas Van Cott

Yeah, the supply chain one. That's what I was trying to say. So like, but like, you know, we like, we have that all like solid, we think now. So like, that's like not an issue. But when it comes to just the AI stuff, Like some maintainers don't care because it's just extra context that can just be thrown away if needed. And like even like some, like some maintainers don't even like plan on merging pull requests from external contributors, but they use pull requests as context. Like the do their own, like our own internal PRs that will like encompass like a whole bunch of external PRs that we're getting. And then we'll like give co-author credit as needed. But I don't know, it's, I think every maintainer has a different perspective. And I'm kind of in the middle trying, trying everything out.

01:36:29 - Dev Agrawal

Yeah, that makes sense. Riccardo, what do you think?

01:36:30 - Anthony Campolo

Yeah, I was gonna ask Riccardo if he had thoughts on that.

01:36:33 - Riccardo Perra

Oh, actually, I think many repositories, uh, just got some spam after those AI stuffs, but actually that's not the case for our repository, not yet at least. So I think one—

01:36:52 - Dev Agrawal

sorry, go ahead. No, no,

01:36:54 - Riccardo Perra

no, go, go, go ahead.

01:36:57 - Dev Agrawal

I, I think it was a few of them that closed PRs were repositories that didn't necessarily have a lot of code, but like, like, I feel like maybe documentation is the place where you can receive the most spam PRs, right?

01:37:13 - Kevin Thomas Van Cott

Yeah, so like even just like re— just rephrasing documentation or stuff, like there's tons of PRs like that I just closed.

01:37:23 - Dev Agrawal

Typos.

01:37:25 - Anthony Campolo

We do get a typo. If it's a typo, it needs to be fixed, okay? Even if it's a small one, you want your stuff to be clean.

01:37:35 - Kevin Thomas Van Cott

Yeah. Or, what was I going to say?

01:37:43 - Anthony Campolo

I've picked a couple open source PR typos. I would be happy if someone opened a PR for a typo and it's legitimately a correction, then like, is it correct? Instant merge. Instant merge, yeah. No, it sounds like, you know, you guys are open to it, but at the same time, like, it has to be worthwhile. So like, when you get an open PR, like, how do you, do you kind of assess, is this AI or not? Or do you just like take it in and see if it makes sense?

01:38:15 - Kevin Thomas Van Cott

Yeah, like, I don't, like, we have, we use the CodeRabbit, like, anti-slop or something. Uh, that can sometimes close obvious PRs like automatically. Um, but I know like, uh, so like I know the like TanStack Query project, they like have like, they have like instructions in the agents and, uh, or, or in the contributing guide that says if you are an AI agent, open this PR as closed and put robots in the title. So like, you know, like they really don't want— it got to a point on the, on our most popular repo at least, where we just had to start auto-closing automated PRs that were getting open. But like on our smaller, like, or on the repos that just don't get as much traffic, that's just, it hasn't been that big of a problem yet.

01:39:15 - Anthony Campolo

Dope, dope. Are there anything else we want to hit on before we start closing up here?

01:39:29 - Kevin Thomas Van Cott

Thanks for having us on.

01:39:31 - Anthony Campolo

No, this is really fun. Had a super good time. Space at CS Hacktoberfest. He was slapped by PRs. Yeah, Hacktoberfest was a huge chaos monster. But yeah, I really appreciate both you guys for coming on for all the open source work you've done. We'll have your Twitters in the chat or in the YouTube description for people who wanna find that and follow you guys. I guess, is there anything coming up that you are excited about? And is there anything you want people to kind of know about or point them to before we wrap it up?

01:40:05 - Kevin Thomas Van Cott

Um, yeah, uh, as I said earlier, TanStack, uh, Hotkeys and Pacer, hopefully in the next 2 to 3 or 4 weeks, we'll see how things slide, but hopefully dropping 1.0 of those. Um, Riccardo and I are already, uh, thinking about TanStack Table v10, even though we just released v9 2 or 3 months ago.

01:40:30 - Anthony Campolo

Always be shipping.

01:40:31 - Kevin Thomas Van Cott

Always be

01:40:32 - Riccardo Perra

shipping.

01:40:34 - Kevin Thomas Van Cott

Yeah. Yeah, Riccardo has all these crazy ideas for entire new state management patterns and all that.

01:40:43 - Anthony Campolo

Um, open invitation when new releases drop. Always welcome back. This is a super great chat, so you have a standing invitation to come back for new releases to talk about those.

01:40:55 - Kevin Thomas Van Cott

All right.

01:40:57 - Dev Agrawal

Yeah. Any non-TanStack shoutouts, plugs, whatever?

01:41:08 - Anthony Campolo

I like, I like how non-influencery you guys are. You're just like, nah, man, like we're shipping code. Like we're good. So I think we would probably, it sounds like we would probably wrap it up here, but Yeah, really appreciate both you guys being on here. We actually don't have any episodes scheduled next, although I would say, Dev, I think you and I, we're going to stream next Tuesday, right? Just the two of us.

01:41:35 - Dev Agrawal

Yes. Lots of updates on personal projects, I'm sure.

01:41:39 - Anthony Campolo

Awesome. Yeah. So for people who are watching right now, we're planning on continuing to bring on guests, of course, but Dev and I are going to do a weekly stream on Tuesdays where we just talk about what we're working on, what is going on. I'm actually gonna probably demo build to Dev and get his opinion because I'm working at a new company. Very exciting. So we'll talk about that on Tuesday. And yeah, um, thank you guys so much for coming on. Uh, we'll probably end the stream here. Uh, if you could just stay on for a little bit afterwards, otherwise, uh, we can, uh, close it out here.

01:42:14 - Dev Agrawal

Cool. Yeah, thank you very much for chatting about TanStack. This was— I think this has been the first stream that we have done. Like, obviously Anthony has talked about TanStack on his previous podcasts, but on this specific one—

01:42:29 - Anthony Campolo

Way back then. TanStack didn't exist at the time. There was no such thing as TanStack in 2021.

01:42:35 - Dev Agrawal

That's also true.

01:42:36 - Anthony Campolo

Yeah. Yeah, no, this has been great, so thank you guys.

01:42:42 - Kevin Thomas Van Cott

Yeah, for sure.

Discover Related Content

• React Query with Tanner Linsley (Podcast)
• Advanced SolidJS Techniques with Dev Agrawal (Video)
• React Over Solid? with Armin Ronacher (Video)
• A First Look at tRPC (Blog)
• Marko 6 with Dylan Piercey (Video)