[FEATURE]: Optimize Editor rendering performance by narrowing Zustand subscriptions

[Gautam25Raj]

Affected Apps / Packages

Studio (apps/studio)

Is your feature request related to a problem?

Yes. High-frequency keystroke events trigger complete subtree re-renders of the entire 16-section editor panel. This happens because the custom hook useResume() returns the entire Zustand store object, forcing the main content panel and all section components to re-render on every single keystroke.

Describe the solution you'd like

1. Selector Narrowing: Transition the main content panel and individual sections away from referencing the broad useResume() hook. Subscribe to specific slices instead:

   const education = useResumeStore((state) => state.resume.education);
   const updateEducation = useResumeStore((state) => state.updateEducation);

2. Event Handler Memoization:
   • Extract section renders into memoized sub-components.
   • Wrap drag-and-drop handlers and callbacks in useCallback inside EditorContentPanel.tsx to prevent breaking React's memo optimizations.

Describe alternatives you've considered

None. Performance degradation under long resumes is a critical UX bottleneck.

Additional Context

Relevant files:

• apps/studio/app/(main)/editor/components/EditorContentPanel.tsx
• apps/studio/features/resume/hooks/use-resume.ts

Additional Context

No response