To work with your Zustand store inside React components, you use the custom store hook created with create. This hook lets you access both the current state and any actions (functions that update state) defined in your store. You call this store hook inside your component and pass it a selector function to pick exactly the part of the state or actions you need, which helps keep your components efficient and responsive.

Suppose your store manages a simple counter with a value and two actions: increment and decrement. In your component, you can access the counter value and these actions by selecting them from the store hook. Each selector subscribes the component only to the selected piece of state or action.

Here, each selector subscribes your component to just the specific piece of state or action you select. This means your component will only re-render when the selected state changes, not when unrelated parts of the store update.

When updating state, always use the actions you defined in your store. Avoid directly mutating store state inside your components. By keeping all state changes inside your store's actions, you ensure updates are predictable and easy to track. This also allows Zustand to trigger re-renders efficiently, updating only the components that actually use the changed state.