# TanStack is The messiah - Part 1

## 1) What is TanStack?

TanStack is an open-source software development toolkit that provides a range of solutions enabling developers to build web and mobile applications efficiently, quickly, and robustly. TanStack includes various tools and libraries, all designed to optimize the development process, from application state management and data handling to UI creation.

![img](https://easymock-blog-prod-qovya.s3.ap-southeast-1.amazonaws.com/L8ZsBSp5wqT2yhmH-zF8c.webp)

TanStack is currently being developed and widely used with popular libraries such as:

- [TanStack Query:](https://tanstack.com/query/latest) Powerful asynchronous state management for TS/JS, React, Solid, Vue, Svelte and Angular
- [TanStack Table](https://tanstack.com/table/latest): Headless UI for building powerful tables & datagrids - Supercharge your tables or build a data grid from scratch for TS/JS, React, Vue, Solid & Svelte while retaining 100% control over markup and styles.
- [TanStack Router](https://tanstack.com/router/latest): Modern and scalable routing for React applications - A fully type-safe React router with built-in data fetching, stale-while revalidate caching and first-class search-param APIs.
- [TanStack Virtual](https://tanstack.com/virtual/latest): Headless UI for Virtualizing Large Element Lists - Virtualize only the visible DOM nodes within massive scrollable elements at 60FPS in TS/JS, React, Vue, Solid & Svelte while retaining 100% control over markup and styles.

## 2) Why is TanStack called the messiah

Let's compare TanStack with other libraries.

### 2.1 TanStack Query vs RTK Query

*If you have ever worked with both of these libraries, your initial impression will definitely be:* 

> Why is TanStack Query so easy to use and set up?
> 

> When using TanStack Query, the number of lines of code (LOC) significantly decreases.
> 

**Fact**: RTK Query is designed to complement Redux Toolkit as a tool that not only supports data-fetching but also manages state. However, this also imposes limitations on RTK Query - it cannot be used standalone, leading to significant constraints on **bundle size as well as complexity in setup and usage**

On the other hand, TanStack Query is a standalone tool that can operate independently without relying on any other library. Setting up and using it is much easier compared to its competitors. Additionally, it offers features such as support for Infinite Query, Devtool, and more…[(To Reference)](https://tanstack.com/query/latest/docs/framework/react/comparison#comparison-or-react-query-vs-swr-vs-apollo-vs-rtk-query-vs-react-router)

**Real-world Problems:** With a project set up by **RTK Query** and **NextJs**

At first, to support data fetching on the server side. Nothing happened until then our project encountered a serious issue on the server - **Memory leak**
The initial cause was identified as stemming from RTK Query's requirement of using an additional third-party library recommended by Redux itself: **next-redux-wrapper**. This library, combined with the inability of RTK Query to clear memory, led to memory accumulation on the server side [to a level where immediate clearing became unattainable for us.](https://github.com/reduxjs/redux-toolkit/issues/3988#issuecomment-1929552259)

![img](https://easymock-blog-prod-qovya.s3.ap-southeast-1.amazonaws.com/xfZiMoT3fqm2BJ2epC-ax.webp)

**TanStack** has come as The messiah. We have switched to using [TanStack Query](https://tanstack.com/query/latest) with features almost identical but supported with server-side memory clearing.

![img](https://easymock-blog-prod-qovya.s3.ap-southeast-1.amazonaws.com/BgidRq-cmEQVVGteBirBG.webp)


### 2.2 TanStack Router vs React Router

[React Router](https://reactrouter.com/en/main) is one of the best third-party libraries for React Developer

[TanStack Router](https://tanstack.com/router/latest) has recently been introduced with version v1, but it has garnered significant attention from the community due to its numerous advantages and promising potential to potentially replace its predecessor.

![img](https://easymock-blog-prod-qovya.s3.ap-southeast-1.amazonaws.com/HMG7CnE6o1gyv6rIB7M4k.webp)

***What is the advantage of this product?***

Besides the features nearly identical to its predecessor React Router, TanStack Router also boasts notable features such as

- **Type safe 100%** :  allowing users to opt for Typesafe navigation.

![img](https://easymock-blog-prod-qovya.s3.ap-southeast-1.amazonaws.com/L4qR4-aslWYcEBt-7mAEo.webp)

- **File-base navigate:** Anyone who has used frameworks like Next.js or Remix, this feature won't be too unfamiliar. It's a feature that allows you to automatically create your routes when creating files without the need for manual intervention.
- **Validate Param:** This is a fairly new feature of the TanStack Router. It allows you to validate the parameters received from the URL before bringing them down and using them, thus enhancing security and code quality.

![img](https://easymock-blog-prod-qovya.s3.ap-southeast-1.amazonaws.com/y8VJEKtZpySNWeSH6cKdo.webp)
![img](https://easymock-blog-prod-qovya.s3.ap-southeast-1.amazonaws.com/NEmQLu5HGCm4HPdxhgorU.webp)

- **Authentication (Protected Router)**: The TanStack Router introduces the **beforeLoad** method, allowing you to perform authentication prior to rendering a component. This eliminates the need to create a **higher-order component (HOC)** and wrap the pages requiring authentication as you had to do previously.

![img](https://easymock-blog-prod-qovya.s3.ap-southeast-1.amazonaws.com/yhxUdRzyR1S-_NF3FNwUN.webp)

## Summing Up

TanStack has produced many libraries and is still in the process of development. These libraries are highly regarded by the community and show positive signs. In addition to the aforementioned libraries, TanStack is still developing many other open-source libraries. Let's wait and see if these libraries can change the game among the current giants.

# TanStack is The messiah - Part 1

Kiet Do

Tanstack

EazyMock

MockAPI

Guide

Blogs

NextFeature

system-design

architecture

hex-arch

Mastering

Monads

Functional

animation

Programming

React

principles

patterns

Programing

Recursion

FunctionalTest

SmokeTest

UnitTest

SystemTest

SanityTest

TEQNOLOGICAL

EAZYMOCK

Pick a tag

# TanStack is The messiah - Part 1