How to prevent re-render by unnecessary state change in zustand store?

When using Zustand or similar state management libraries, it is crucial to prevent unnecessary component re-renders caused by unintended state changes. Here are several strategies to effectively minimize this issue:

1. Selective State Subscription

In Zustand, selectively subscribe to specific state properties so that updates to unrelated states do not trigger re-renders for components subscribed to those properties. For example:

javascript
const useStore = create((set) => ({
  apples: 0,
  oranges: 0,
  increaseApples: () => set((state) => ({ apples: state.apples + 1 })),
  increaseOranges: () => set((state) => ({ oranges: state.oranges + 1 }))
}));

// Subscribe only to 'apples' in the component
const apples = useStore(state => state.apples);

In this example, even if the 'oranges' state updates, components using 'apples' will not re-render.

2. Simplify State Objects

Maintain state objects as simple and flat as possible. Complex or deeply nested state structures are harder to track and can inadvertently cause unnecessary re-renders. For instance, aggregate related data together and split it when needed:

javascript
const useStore = create((set) => ({
  fruits: { apples: 0, oranges: 0 },
  incrementFruit: (fruit) => set((state) => ({
    fruits: { ...state.fruits, [fruit]: state.fruits[fruit] + 1 }
  }))
}));

3. Use Functional Updates Instead of Direct Modifications

When updating state, employ functional updates to avoid unnecessary object creation and potential re-renders. Zustand allows updating state by passing a function to set, which prevents creating a new state object if the new and old values are identical:

javascript
const increaseApples = () => {
  set((state) => {
    if (state.apples < 10) {  // Assume a maximum value limit
      return { apples: state.apples + 1 };
    } else {
      return {};  // No update
    }
  });
};

4. Optimize with React.memo

For React components, leverage React.memo to optimize rendering and prevent child components from re-rendering unnecessarily due to parent component updates:

javascript
const MyComponent = React.memo(function MyComponent({ apples }) {
  // Component logic
});

By implementing these approaches, you can effectively control and reduce unnecessary component re-renders triggered by state updates, thereby enhancing application performance and responsiveness.