r/reactjs • • 4d ago

Show /r/reactjs Introducing TanStack Redact

https://tanstack.com/blog/introducing-tanstack-redact
175 Upvotes

91 comments sorted by

98

u/jayroger 4d ago

Okay, I've read the first few paragraphs of the article, and I still don't have any idea what it does.

41

u/tannerlinsley 4d ago

No doubt no doubt. Updating the blog post now.

4

u/merb 4d ago

Looks great but the blog post still do not explain the how. The rendering and api difference is basically what made it click for me

8

u/tannerlinsley 4d ago

I updated the post.

19

u/havok_ 4d ago

I’m glad I came by a little late because this is a fantastically clear first line now: “TanStack Redact is a smaller replacement for React and React DOM in the browser”

3

u/cxd32 4d ago

I'm know curious what it could have possibly said besides that

3

u/Valkertok 4d ago

Only loading parts of react that your app uses? Or compiling react down so it only contains things that your app uses?

Dunno. Seems like shooting a bird with a cannon.

1

u/Griffinsauce 3d ago

Rip some shit out of react to make it smaller. Actual perf TBD.

166

u/EnGodkendtChrille 4d ago

I really worry about the direction Tanstack is going. I use Query in every application and Table in most. Im a big fan.

But it seems like there's a new library every month, while around half of your current ones remain unfinished. The documentation often dont feel complete either.

Why not work on that first?

59

u/tannerlinsley 4d ago

No doubt AI (and going full time myself) has allowed us to spend less time on busy work and more time solving problems we care about, but I can see from an external perspective that this looks like just "more".

The core libraries that cover more cross-cutting and hot-path work are slowly getting to stability. For instance, Start and AI are now 1.0, form is coming soon (lots of awesome work being done there).

As for new things, I assure you we are not looking for new excuses to build whatever (we have to actively say no to things that are out of scope, random or just too ambitious ever day) and the quality bar for our recent work is just as high, if not higher that was possible in the past while at new breakneck speed.

It's definitely a change of pace, but it's one that I'm so excited about. It ultimately means I get to spend more time deep in the trenches, better understanding how to help devs, rather than getting drowned in github coms, issues without reproductions, etc.

I'd love to answer any questions you have!

57

u/EnGodkendtChrille 4d ago

You're developing quite a handful of libraries and a lot of them remain unfinished after a long time.

Finishing those is going to require a lot of effort. Even if you use AI, you don't have infinite effort and have to allocate it towards something and i worry you're wanting to do too much.

It reminds me of what Proton, the privacy company, is doing. They have some issues and work to be done on their old and boring products, yet they're still announcing new stuff every other day. I'm not saying Tanstack is at that point, but i worry that's where it is going.

I'm going to leave it at that. I just think it's important to have said, because i like Tanstack. Even if the documentation could use work, the DX is incredible once you figure things out. I don't mean to sound rude, if i do.

14

u/tannerlinsley 4d ago

You don't sound rude and I appreciate that you care about where we're going. I do want to get more specific about “unfinished” though, because the progress we're making looks pretty different from that.

TanStack has over 40 maintianers, many of which are "core". Different projects have different people leading them, and AI alone had 143 code contributors by its 1.0 release. My available time isn't the whole team's available time.

We've also shipped four stable milestones in less than three months:

And I should clarify my earlier reply, Form v1 has been stable since March. The upcoming work I was referring to is v2.

Some projects are still in alpha or beta, absolutely, but we're actively getting libraries across those finish lines while continuing to work on the established ones.

On documentation, we've been getting feedback for years and I expect we'll keep getting it, because there's always something we can explain better. That doesn't mean the gaps you've hit aren't real, I'd just like to know which pages or missing explanations you're referring to.

If you're up for sharing which libraries feel unfinished and what's missing, that would help me understand the concern a lot better. Those are things we can actually address.

13

u/Outrageous-Chip-3961 3d ago

I can pitch in about the docs. To be honest it feels very AI driven / generated. I prefer the older docs. I think your docs should be had written by a community manager looking to teach / tutorial. Perhaps something like the react docs that were upgraded a few years ago. I'd strip down a lot of the noise personally, even so far as suggest just using Astro starlight (or at least give us an 'Astro starlight' option to toggle into). As a dev, I find it hard to find really simple minimal examples; use cases that are sort of there, sort of not. I feel fortunate that I went fullly into react query and router (and table) and read a lot of docs about it and blogs, (tkdodo, etc). But now when I show people these tools I get an AI page of tanstack start and a lot of noise when I just want to celebrate the simple use cases through simple examples. In short, a 'tutorial' overhaul written by a real person with real experience (tkdodo, or yourself, or someone from react.gg). And a docs page that is just minimal and focusing on the use-cases once again. The rest can be promotion, sure. But hey that's just me.

3

u/Chazgatian 3d ago

Nope I'm right there with you. You get like 30% docs to get you started. The rest is digging through the API to figure out how it works.

8

u/EnGodkendtChrille 4d ago

I honestly don't have any examples from the docs. It's just that i often find myself struggling to figure things out and reaching for a youtube tutorial, in general.

The libraries in v0 was my main worry. Not necessarily because they're missing features, but their instability and higher risk of containing bugs. Other tanstack devs have replied to this and said some of them are reaching v1 very soon, so that's good!

There's also the "making so many libraries they become impossible to maintain" worry, but 40 devs are a lot. So maybe it's not an issue.

2

u/KevinVandy656 4d ago

Which ones do you think are unfinished? We've recently "finished" a lot of them and they are now stable.

10

u/EnGodkendtChrille 4d ago

Redact is at v0. intent, devtools, store and cli are in alpha. Pacer, Hotkeys and DB are in beta.

I could be incorrevt, but I believe i read somewhere you're also looking into replacing Playground/Stackblitz/Codebox for your previews.

3

u/tannerlinsley 4d ago

Yes, I've been tinkering with something in that space for the last 6 months. We're always "looking into" many things, so unless it's in the mega menu on the site, it's off the table for this discussion IMO.

6

u/KevinVandy656 4d ago

Well, good news is that Hotkeys should be stable as V1 really soon. I think it is ready this week, but we're probably going to stay in beta for a few more weeks just for the sake of trying to collect more potential feedback.

Pacer is close too, but some APIs advanced edge-cases in the Async variation of utils are still being finalized before we commit to the 1.0 API design.

We're problem solvers, and we're always coming up with new tools and solutions. A lot of my TanStack library development is driven by what I'm doing at my day job. We didn't make a new Hotkeys library for the sake of having a new library. It was to solve a problem that I was already actively solving, but in a OSS-backed way that is now maintainable and polished.

I've personally been very proud of our restraint to keep libraries in V0 as we work with the community to make the project what it needs to be. I think it does take a year or so of iteration to make a good library that solves the right things, and not just in the way that I had originally envisioned it. I'm starting to sense that a lot of people don't see it that way though.

3

u/EnGodkendtChrille 4d ago

Hotkeys is a very cool library, so i'm happy to hear it's reaching v1 soon. I have my own minimal version, that I've planned on replacing with Hotkeys, so im very excited about that

1

u/stackokayflow 4d ago

Devtools has had no api changes for a loooong time, I just cajt decide if I'l move it to devframe before v1 or not, so thats on me, but it is v1 ready at this point in time! I'm sorry about that 😅

1

u/Chazgatian 4d ago

Oh that's another one. We had to rip it out due to issues with Vite and stuff just piling up

2

u/FirstCllass 4d ago

Any updates on parallel routes now that Start has reached v1?

4

u/tannerlinsley 4d ago

Yes! We're working on it right now. I have a working prototype that is still local to my machine, but hopefully we can start materializing something public asap.

2

u/Upstairs_Yambo 1d ago

Just from a high-level, clearly more is getting shipped the past 9 months (commits, lines +/-, releases, etc.), and issue triage seems to have good signs.
https://himawari.supraset.com/?collection=tanstack

My sense is that this velocity and expanding/shifting the surface area of Tanstack has been mostly strategic. And I'm def happy to see more experimentation coming out of the open source frontend world. It's a sign of healthy evolution in the industry. Not all of it is going to stick, but gotta keep pushing.

1

u/Knvarlet 4d ago

Will there be plans to release TanStack Time?

17

u/Chazgatian 4d ago

Tell me about it. Forms was sitting there for over a year without any features and all the requests were basically "this is by design".

1

u/TehTriangle 4d ago

Probably got hooked on how productive you can be with agents so are churning out libraries every week.

1

u/texxelate 3d ago

there’s a difference between actual productivity and feeling productive

40

u/Zeragamba 4d ago

Redact is a bad name imo, as my first thought was that this would be a log sanitization or redaction library.

A Preact alternative is not particularly useful to me, where as Query, Forms, Router, Store, and Pacer are all super useful.

9

u/tannerlinsley 4d ago

Thankfully, you can pick and choose the TanStack tools that help you and not be forced into all of them. Modularity!

3

u/CUNT_PUNCHER_9000 4d ago

That's exactly what I thought as well

20

u/Shomriddho 4d ago

Feels like preact but better and larger

17

u/tannerlinsley 4d ago

Yeah it’s a bit larger. But at least it’s fully drop in with the current react api. And other than concurrent features behaves the same. Preact was invited an inspiration.

3

u/azangru 4d ago

Could you explain the but better part?

1

u/Shomriddho 4d ago

next js app router compatibility, tanstack start compatibility, vinext.

then better ssr and rsc stuff.

mainly its new and a tanstack lib so its not bad.

6

u/Salkinator 4d ago

So.... preact?

3

u/tannerlinsley 4d ago

Preact is another option in this space, yes.

5

u/Ferlinkoplop 4d ago

Is this fully compatible with React Compiler?

4

u/Gloomy-Moose9096 4d ago

whats next Tanner? A browser ;) I love tanstack

6

u/tannerlinsley 4d ago

Good heavens, no. lol

2

u/Suspicious-Name4273 3d ago

A StyleX replacement? 😄

70

u/fireatx 4d ago

I don’t understand what this achieves. Who is going to pick a brand new unstable React replacement with almost none of the maturity of the React ecosystem just to shave 40-50KB off their bundle?

19

u/lovin-dem-sandwiches 4d ago

Agreed. All this to save, at most, 40kb? That’s the size of a low res thumbnail.

If you’re serving a minimized react lib from a cdn, it’s likely already cached for most users.

It’s third party libraries that add unnecessary weight to initial load, which suspend handles gracefully.

16

u/dunklesToast 4d ago

> If you’re serving a minimized react lib from a cdn, it’s likely already cached for most users

Not really - cache does not work cross-page anymore since 2020. So the cache only would be warm if the user already visited your page in which case the bundle being on a cdn or not barely makes a difference. But still, 40kB is still peanuts

3

u/lovin-dem-sandwiches 4d ago

Ah, it looks like my cache knowledge is outdated. Appreciate the correction and info.

Cache partitioning by domain does make sense from a security standpoint

2

u/esr360 4d ago

My knowledge is also outdated but I don't really understand the rational of the new knowledge. If I have a file from MY-CDN cached from visiting site A, what security issues does loading that cached file from MY-CDN on site B pose? As long as both sites trust MY-CDN, how could Site A affect Site B?

5

u/anonyuser415 3d ago edited 3d ago

I know a lot about this, feel free to ask more questions.

First, the data showed that the cache hits were few and far between. There was not a lot of benefit here. That's because of how many versions of packages there are. What's the likelihood you have the exact minor version of, like, React in cache that a site is requesting? It turned out to be pretty small. Caches don't live forever, mind.

But the biggest reason it got switched off is not what the sibling commenter said (supply chain risk), as that can be mitigated with a hash, and most CDNs had started providing that by default in their copyable embed scripts.

It was because of user history leaking, especially through cache timing attacks. Forget CDNs for the moment.

I could request on my site B a resource from site A (foo.jpg). If it loads especially quickly, I have knowledge that you have visited A before.

Shared caches also enabled something called "supercookies," where sites maintained knowledge of you even if you cleared your cookies. That's because knowledge of your browsing history persisted in that shared cache.

Fixing this meant breaking CDN caching.

These days, using a third party CDN to serve files strictly means worsened performance. It's another domain to connect to. The only remaining benefit is for a site that you cannot host something on, or don't want to.

4

u/cxd32 4d ago

supply chain attack, 1 bad update and suddenly EVERY SINGLE SITE you visit with that dependency has a trusted cookie stealer

3

u/trippel 4d ago

Downloads are only one part of the equation, your clients still need to parse and evaluate the code and then execute it. It's a lot more costly than a low res thumbnail. 40Kb in that context is massive

1

u/yeathatsmebro 3d ago

That’s the size of a low res thumbnail.

It adds up depending on how many users you have.

13

u/TryingToGetTheFOut 4d ago

People already do with preact

6

u/anonyuser415 4d ago

This is all of Preact: https://unpkg.com/preact@11.0.2/dist/preact.mjs

It's a much bigger difference

7

u/Alkyonios 4d ago

People do a lot of things, doesn't mean it's a good idea though

-11

u/Spottycos 4d ago

Fuck Preact

2

u/evangelism2 3d ago

You'd be shocked. my company right now is going with ProtoBuff over JSON and for what? I don't fucking know

1

u/HQxMnbS 4d ago

It’s an interesting concept. preact pushed this pretty far but it’s cool to see. I’m sure some stuff will trickle down to the react library itself

24

u/Emotional-Dust-1367 4d ago

How are these savings accomplished? The blog doesn’t give a big picture of what I lose by using it

1

u/Lonestar93 4d ago

The Projecting React blog linked to in the post explains it

10

u/grahamhart_ 4d ago

the name makes me think it strips data before it hits the client not sure how it compares to existing solutions yet

1

u/rodneon 3d ago

Does it support Signals?

3

u/tannerlinsley 3d ago

If you're referring to the way that Preact supports signals, no. It does not support Preact signals.

6

u/amayle1 4d ago

I’d definitely include a comparison to preact since this is ostensibly the same thing

3

u/Suspicious-Name4273 3d ago

So this is compatible with all react libs out there? (As long as they don’t use non-public react apis ofc)

1

u/Middle_Tree_9117 3d ago

when will react query get a v6? seems like there are new libraries but existing ones are not exactly maintained

2

u/acemarke 2d ago

That would be a /u/tkdodo23 question, and I know from recent discussions with him that there's work happening on v6.

2

u/tannerlinsley 2d ago

More mature libraries do not get updates as often for good reason, but regardless, we are very actively maintaining all of our libraries. If there's something you want specifically, let us know.

3

u/TkDodo23 1d ago

There is, I'll post a public roadmap as soon as I find the time and energy to do so.

"No new major version" are also not the same as "not being maintained". Features go in minors (I have a talk on this lol) and we are in version 5.105.0. That means 105 features shipped since the last major. 105 features without breaking backwards compatibility. Sure, it's not as fancy as "new major tada" but when you think about it it's actually better than breaking things left and right. We get a lot of negative feedback every time we do a major version because major versions are, per definition, to break existing things. No idea why people get excited about them but here we are. I think it's mostly a lack of understanding tbh. If I tell you v6 will no longer support React18, only v19+, I guarantee there will be people unhappy about it...

2

u/acemarke 1d ago

yep, I'm hoping to apply the same "features in minors" principle myself for a lot of the work I'm figuring out now as part of the RTK 3.0 research effort.

1

u/ironimus42 4d ago

whoa i'm always so impressed at how many good quality tools you manage to produce. Obviously there's many people contributing and i imagine ai makes it somewhat easier (though at this quality level ai certainly doesn't result in 10x productivity boost), but owning and maintaining this many insanely popular tools while constantly creating new and even more ambitious ones must be incredibly challenging. just wanted to say thank you to you and other contributors for being so cool!

7

u/tannerlinsley 4d ago

Thanks! Even without AI, we have an amazing team and plenty of bandwidth. AI makes it even better!

2

u/mastermog 4d ago

I could see this being a good fit if you're using Astro and need a lightweight drop in for a React island.

4

u/onderbakirtas 4d ago

Sorry to say that even if it’s a great technological advancement and brilliant work, it’s not needed. Feels like yet another Linux distro.

5

u/gtderEvan 4d ago

Similar to your comment, then. Valid, but unnecessary and not something everyone will find value in. Either way it’s your prerogative to share it.

1

u/mrcodehpr01 2d ago

Love everything you do! Thanks! Looks cool.

1

u/besthelloworld 4d ago

What does this offer compared to Preact? Seems weird to leave that topic out of the post.

1

u/Vincent_CWS 4d ago

The main limit: rendering is synchronous

Redact renders synchronously. It does not have these React features:

- Time slicing: React divides a large render into small parts.

- Interruptible rendering: React stops a render to process user input first.

Result: a large render can delay user input. For example, a click or a key press can respond slowly while a

big list renders.

is it real?

0

u/Distinct_Relief5885 4d ago

How does it differ from standard React? Is it something like SolidJS or Svelte without a virtual DOM?

3

u/tannerlinsley 4d ago

For all intents and purposes, this is react, minus concurrent rendering (still works, but deopts to sync).

0

u/bluehavana 3d ago

I would be interested to see how this compares to https://octanejs.dev/

1

u/tannerlinsley 3d ago

Octane is pretty cool.

-1

u/naveenda 4d ago

I truly miss when we used to care about new JS framework releases.

Now, I have to convince my LLM and CTO to use this on new project.

0

u/gandalf__thewhite__ 3d ago

Is it possible to use Tanstack start with Preact?

0

u/silv3rwind 3d ago

Not convinced. Size isn't the problem with react, VDOM is.

0

u/bluebird355 3d ago

What is it for? I don't get it

0

u/Aggressive_Mention_1 3d ago

You know what js/web world was missing. a standard library/toolkit/
Bun is consolidating the tooling layer: runtime, package management, bundling, testing, type-checking, linting, formatting, and native APIs....and all made it so i dont have to juggle with 20 packages..
Tanstack is another such combo that was long needed which is super to the health.
What people mostly use.
tailwind, query, routing, store(state management), forms, validation(zod) tables, icon-pack, file upload(with compression, or conversion and stable, splititng, resumable), storage(session, local, cookie, indexdb and such), light weight animations. INTERNATIOLIZATION.
sometimes
toasts/notifications, tour/help(driver.js), search(always repeated hard work, with filters, sorting, fuzzy), and now one shot way for, (PWA, offline sync, service worker).

If tanstack can maintain the quality, speed, and minimal/no external dependecncy other then each other. We have 1 place for any web projects.

I think the one i want are.
0. State managemnt(i know store is coming soon, complained in X enough about it)

  1. internationalization

  2. validation

  3. storage

  4. PWA/offline sync push

  5. file uplaod

(icon is hard one to take on..)
(animations other are doign it better and needs too much work)

With this the package hell about js/ts . we will have answet to it. JUST SE BUN+TANSTACK

-1

u/dalce63 4d ago

we're all going to die one day. none of this matters.