<!--
title: Choose hooks wisely
domain: ai-agents
topic: React
language: TypeScript
source: lobehub/lobe-chat
updated: 2025-07-08
url: https://awesomereviewers.com/reviewers/lobe-chat-choose-hooks-wisely/
-->

Use React hooks only when you need reactivity and component re-rendering. For accessing instantaneous values or one-time data retrieval, prefer plain functions to avoid unnecessary re-renders and improve performance.

When you only need current state values without subscribing to changes, use direct selector calls instead of hooks:

```typescript
// ❌ Avoid - causes unnecessary re-renders for instantaneous values
export const useMainInterfaceAnalytics = (): MainInterfaceAnalyticsData => {
  const session = useSessionStore(sessionSelectors.currentSession);
  // ... other hook calls
}

// ✅ Prefer - direct access for one-time values
export const getMainInterfaceAnalytics = (): MainInterfaceAnalyticsData => {
  const session = sessionSelectors.currentSession(getSessionStoreState());
  // ... direct selector calls
}
```

Consider component lifecycle when deciding state placement. If components unmount and remount frequently, evaluate whether state should persist in a global store or reset with component lifecycle.