https://github.com/abhub23/react-flip-game
Just a Memory game
https://github.com/abhub23/react-flip-game
grid-layout reactgame reactjs
Last synced: about 2 months ago
JSON representation
Just a Memory game
- Host: GitHub
- URL: https://github.com/abhub23/react-flip-game
- Owner: abhub23
- Created: 2024-12-21T18:27:25.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-09-29T03:28:00.000Z (9 months ago)
- Last Synced: 2025-09-29T05:31:48.794Z (9 months ago)
- Topics: grid-layout, reactgame, reactjs
- Language: TypeScript
- Homepage: https://flipgame.abdullahtech.dev
- Size: 231 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Zustand State and `set` Explained
## 1. Ways to Update State Using `set`
Zustand provides two ways to update state inside the store:
### a) Functional Update (`set((state) => {...})`)
- Use this **when your update depends on the previous state**.
- It ensures that you always modify the latest state.
```ts
set((state) => ({ count: state.count + 1 }));
```
> **Why?** The function receives `state`, so we can safely modify `count` based on the latest state.
---
### b) Direct Object Update (`set({...})`)
- Use this when updating state **without depending on the previous state**.
```ts
set({ user: newUser });
```
> **Why?** We don’t need the previous state here, just replacing `user`.
---
## 2. Parentheses in `set((state) => {...})`
- When returning an object in an **arrow function**, **wrap it in `()`** to avoid JavaScript confusion.
✅ **Correct:**
```ts
set((state) => ({ count: state.count + 1 })); // ✅ Parentheses required
```
❌ **Incorrect (No `return`, JavaScript thinks `{}` is a function block)**
```ts
set((state) => { count: state.count + 1 }); // ❌ Syntax error!
```
If using a function block `{}`, explicitly use `return`:
```ts
set((state) => {
return { count: state.count + 1 };
});
```
---
## 3. When to Use Which?
| **Approach** | **When to Use?** | **Example** |
|-------------|----------------|-----------|
| `set((state) => ({ ... }))` | If updating based on previous state | `set((state) => ({ count: state.count + 1 }))` |
| `set({ ... })` | If replacing state without needing the old state | `set({ user: newUser })` |
---
## 4. Why No Parentheses in Some Cases?
- If an arrow function uses `{}`, it’s treated as a function **block** and requires an explicit `return`.
- If it’s **one line returning an object**, wrap it in `()`.
✅ **With `{}` (Needs `return`)**
```ts
set((theme) => {
const toggle = theme.isDarkmode === "dark" ? "light" : "dark";
localStorage.setItem("theme", toggle);
return { isDarkmode: toggle }; // ✅ Explicit return needed
});
```
✅ **With `()` (Implicit Return)**
```ts
set((state) => ({ count: state.count + 1 })); // ✅ No `return` needed
```
---
## Summary
- Use `set((state) => ({ ... }))` when updating based on previous state, and `set({ ... })` when setting a new value directly.
- Use `()` around objects when using an **implicit return** in arrow functions.
- If using `{}`, you **must** use `return`.
---
🚀 **Now you have a complete reference for Zustand state updates!**