Always use React's reactive hook patterns instead of imperative state access or manual effect management. This ensures proper component re-rendering, better performance, and cleaner code architecture.
Always use React’s reactive hook patterns instead of imperative state access or manual effect management. This ensures proper component re-rendering, better performance, and cleaner code architecture.
Avoid non-reactive state access:
// ❌ Bad - non-reactive, fixed value
const config = useAgentStore.getState().currentAgentChatConfig;
const inboxMessages = useChatStore.getState().messagesMap[messageMapKey(INBOX_SESSION_ID, activeTopicId)] || [];
// ✅ Good - reactive hook usage
const config = useAgentStore(agentSelectors.currentAgentChatConfig);
const inboxMessages = useChatStore(chatSelectors.inboxActiveTopicMessages);
Use proper data fetching patterns:
// ❌ Bad - manual useEffect for data fetching
useEffect(() => {
const fetchData = async () => {
const data = await api.getData();
setData(data);
};
fetchData();
}, []);
// ✅ Good - use data fetching libraries
const { data, loading, error } = useSWR('/api/data', fetcher);
Leverage React’s built-in capabilities:
Enter the URL of a public GitHub repository