Zustand and Tanstack Query Are Dead Because of Next.js
Mike Codeur
Since React Server Components (RSC) became the standard with Next.js, the way I structure my projects has radically changed. 🚀
To recap, both libraries are “state managers”:
- Tanstack Query: Server State
- Zustand: App State (UI)
My reasoning:
1️⃣ Goodbye unnecessary APIs:
With Server Components, I can directly make calls to my database or external services from the server. No need for libraries like Tanstack Query to manage “server state” on the client side.
2️⃣ Maximum client-side code reduction:
I reduce the use of client components as much as possible, keeping them limited and placing them as low as possible in the React component tree.
- Fewer client components = less state to manage.
- For the rare cases where client-side code is necessary (local interactions, animations, etc.), React’s Context API is more than sufficient.
- Why add tools like Zustand when native features already meet the needs?
3️⃣ Simplified bundles:
Fewer client-side libraries = better performance (smaller bundle size) and simpler, more maintainable code.
🚫 Stop building Next.js apps with a “React front-end developer” mindset!
In Next Mastery, we cover these new development approaches...
To balance my post:
3 examples of projects that don’t require Zustand or Tanstack Query:
1️⃣ Blog or static/dynamic content site
- Data is loaded server-side with React Server Components (e.g., articles, categories).
- Why? No complex client-side state; everything is fetched and rendered via RSC.
2️⃣ Simple analytics dashboard
- Aggregated data (e.g., revenue, active users) is fetched directly via Server Components. Client interactions are minimal.
- Why? Data is pre-rendered and updated server-side, with no need for client-side state management.
3️⃣ Landing page with a form
- A simple site with a form (e.g., sign-up, contact). Validation happens server-side and with lightweight libraries like React Hook Form.
- Why? No persistent state management or server synchronization is needed.
3 examples of projects that do require Zustand or Tanstack Query:
1️⃣ Applications requiring complex user interactions
- Example: A task management app with drag & drop, where users can reorder tasks or modify states locally before syncing with the server.
- Why Zustand? To manage local state for tasks (position, status, etc.).
- Why Tanstack Query? To sync changes with the server once validated.
2️⃣ Applications relying on multiple external APIs
- Example: An app that depends on multiple third-party APIs to display data like product info, customer reviews, or exchange rates.
- Why Zustand? To handle temporary or local states across different sections of the app (loading states, user preferences, intermediate states).
- Why Tanstack Query? To manage caching, synchronization, and automatic updates for data from several external APIs, reducing unnecessary calls and improving performance.
3️⃣ Real-time chat applications
- Messages are fetched from the server (via WebSocket or polling) but also require local management for drafts, open conversations, etc.
- Why Zustand? To locally store state for conversations, unsent messages, etc.
- Why Tanstack Query? To sync messages and maintain consistency with the server.
What about you?
- How do you use Zustand or Tanstack Query in your projects?
- Do you think Server Components will change the game?