Zustic - Ultra-Lightweight State Management & Query System - Complete React Ecosystem | Zustic - Ultra-Lightweight State Management & Query System

Code

// store.ts
import { create } from 'zustic';

type CounterStore = {
  count: number;
  inc: () => void;
  dec: () => void;
  reset: () => void;
};

export const useCounter = create<CounterStore>((set) => ({
  count: 0,
  inc: () => set((state) => ({ count: state.count + 1 })),
  dec: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

Code

import { createApi } from 'zustic/query'

const api = createApi({
  baseQuery: async (params) => {
    const res = await fetch(`${BASE_URL}/${params.url}`, {
      method: params.method || 'GET',
      body: params.body ? JSON.stringify(params.body) : undefined
    })
    return { data: await res.json() }
  },
  cacheTimeout: 5 * 60 * 1000,
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => '/users'
    }),
    createUser: builder.mutation({
      query: (user) => ({ url: '/users', method: 'POST', body: user })
    })
  })
})

export const { useGetUsersQuery, useCreateUserMutation } = api

Why Zustic is Simple

🎯

One Function

Just use create() - that's all you need to start managing state

⚡

Minimal API

set() to update, get() to read - no complex patterns

🪶

Tiny Bundle

Only ~500B (gzipped) - lighter than Redux, Zustand, and MobX combined

🚀

Production Ready

Used in real applications - fully tested and optimized for performance

🧩

Middleware Support

Extend with logging, persistence, validation without changing store code

💾

TypeScript First

Full type safety with automatic inference - no extra configuration needed

How Zustic Compares

Feature

Zustic

Redux

Zustand

Context API

Bundle Size

~500B

~6KB

~2KB

Built-in

Learning Curve

⭐ Easy

⭐⭐⭐⭐⭐ Hard

⭐⭐ Easy

⭐⭐⭐ Medium

Boilerplate

Minimal

Massive

Minimal

Some

Middleware

Built-in

Required

Optional

TypeScript

Excellent

Good

Complete React Ecosystem

Four lightweight, production-ready libraries for state management, data fetching, forms, and internationalization.

⚛️

State Management

zustic

Ultra-lightweight core state management (~500B gzipped). Master with three functions:create(), set(), get(). No boilerplate, full TypeScript support, and optimized with useSyncExternalStore.

🔄

Server State & Caching

zustic/query

Intelligent data fetching with automatic caching, deduplication, and smart invalidation. Auto-generated hooks, middleware pipelines, and plugin system for complete control over your API layer.

📝

Form Validation

zustic/hook-form

Type-safe form management with built-in validation. Supports Zod, Yup, and custom rules. Zero boilerplate field state management with automatic error tracking and recovery (~3KB gzipped).

🌍

Internationalization

zustic/i18n

Multi-language support with type-safe translations and automatic locale switching. Dot-notation keys, async loading, efficient state management, and seamless language transitions (~2KB gzipped).

🔌

Middleware & Extensions

all libraries

Extend functionality with logging, persistence, validation, and custom logic across all libraries. Framework-agnostic middleware system that works everywhere React runs.

🚀

Production Ready

ecosystem

Battle-tested ecosystem with zero external dependencies. Fully typed, well-documented, actively maintained, and optimized for performance. Perfect for any React application.