yuustate

KO | EN

gitlite — search

#javascript #llm #golang #android #machine-learning #rust #linux #macos #java #vue #pytorch #mcp #ios #openai

(★ 92)

Lightweight, simple, and powerful state management library. The alternative for both Zustand & TanStack Query!! 🤯

yuustate 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# YuuState

A unified state model for **sync & async** data.

Built on the patterns you know. Refined into something simpler.\
Inspired by [Zustand](https://zustand.docs.pmnd.rs) & [TanStack-Query](https://tanstack.com/query).

_Fine-grained reactivity, minimal boilerplate, zero dependencies._

Demo: https://afiiif.github.io/yuustate/

**Installation:**

```
npm install yuustate
```

**Read the docs → https://yuustate.vercel.app**

<br>

---

**Like Zustand, but has additional capabilities:**
- No selectors: automatically optimizes re-renders
- Store events: `onFirstSubscribe`, `onSubscribe`, `onUnsubscribe`, `onLastUnsubscribe`
- Easier to set initial state on SSR/SSG
- Smaller bundle

**Like TanStack Query, but:**
- DX is very similar to Zustand → One mental model for sync & async
- Much smaller bundle than TanStack Query → With nearly the same capabilities

---

<br>

## Store (Global State)

A store is a global state container that can be used both **inside and outside** React.\
With YuuState, creating a store is simple:

```tsx
import { createStore } from "yuustate/react";

const useLawn = createStore({
  plants: 3,
  zombies: 1,
});
```

Use it inside a component:

```tsx
function MyPlants() {
  const { plants } = useLawn(); // No selectors needed.

return <div>Plants: {plants}</div>; // Only re-render when plants state changes
}
```

Update the state **anywhere**:

```tsx
const addPlant = () => {
  useLawn.setState(prev => ({ plants: prev.plants + 1 }));
};
```

## Query Store for Async State

Create a query store for async data with `createQuery`:

```tsx
import { createQuery } from "yuustate/react";

const plantDetailQuery = createQuery(
  async ({ id }) => {
    const res = await fetch(`/api/plants/${id}`);
    return res.json();
  },
);
```

Use it in your component:

```tsx
function PlantDetail({ id }) {
  const usePlantDetailQuery = plantDetailQuery({ id });
  const { data, error } = usePlantDetailQuery();

if (!data && !error) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

return <div>Name: {data.name}, damage: {data.damage}</div>;
}
```

<br>

---

Read the docs → https://yuustate.vercel.app

yuustate

yuustate 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

yuustate

yuustate 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README