Unify Zustand store usage patterns across React components

[coderabbitai]

Background

During the code review of PR #1108, an inconsistency was identified in how Zustand stores are accessed across React components in the codebase.

Current State

The codebase currently uses two different approaches:

1. Reactive approach: useStore((state) => state.property) - used in components that need to re-render when state changes
2. Non-reactive approach: useStore.getState().property - used in callbacks where reactivity is not needed

Problem

The codebase has inconsistent usage patterns. Some callback functions use the reactive approach when they should use the non-reactive getState() approach.

Examples of Files That May Need Refactoring

Based on the discussion, these files may need to be updated to use the consistent pattern:

• components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton/index.tsx (line 31)
• components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.tsx (line 23)

Preferred Approach

As decided by @junhaoliao:

• For callbacks: Use useStore.getState().method since the output is not reactive and doesn't need state as a dependency in the hook
• For reactive components: Use useStore((state) => state.property) with proper selectors to prevent unnecessary re-renders

Acceptance Criteria

• Audit all Zustand store usage across the webui client codebase
• Identify files using the reactive approach in callbacks
• Refactor callback functions to use getState() approach
• Ensure reactive components use proper selectors
• Update any related documentation or coding guidelines

References

• PR Discussion: feat(webui): Integrate Monaco editor for future Presto SQL query input. #1108 (comment)
• Related PR: feat(webui): Integrate Monaco editor for future Presto SQL query input. #1108

Requested by: @hoophalab