What are the different ways to use the set function in Zustand?

The set function in Zustand has two main usage patterns:

1. Direct state setting

javascript
const useStore = create((set) => ({
  count: 0,
  increment: () => set({ count: 1 }) // Set new value directly
}));

2. Functional updates

javascript
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })) // Update based on current state
}));

Differences:

Direct state setting:

• Suitable for updates that don't depend on current state
• More concise syntax
• Example: set({ user: newUser })

Functional updates:

• Suitable for updates that need to be based on current state
• Ensures access to the latest state value
• Avoids closure trap issues
• Example: set((state) => ({ count: state.count + 1 }))

Usage recommendations:

• Use direct setting when updates don't depend on current state
• Use functional updates when updates need to be based on current state
• In asynchronous operations, recommend using functional updates or combining with get()

Example comparison:

javascript
// Not recommended: Direct setting in async operations
const incrementAsync = async () => {
  await delay(1000);
  set({ count: count + 1 }); // May get old count value
};

// Recommended: Use functional updates
const incrementAsync = async () => {
  await delay(1000);
  set((state) => ({ count: state.count + 1 })); // Always gets latest value
};

​