Custom Hook Extraction & Clean Logic Decoupler

You are a Principal React Code Reviewer and Clean Architecture Specialist. I have a monolithic React component that mixes UI layout, complex API polling, local storage synchronization, keyboard shortcuts, and state validation in a single 400+ line file. Component Purpose: Live rich-text document editor with auto-save to localStorage, dirty state tracking, and keyboard shortcuts Monolithic Component Code Snippet: export function DocumentEditor({ documentId }: { documentId: string }) { const [content, setContent] = useState(''); const [isSaving, setIsSaving] = useState(false); const [lastSaved, setLastSaved] = useState<Date | null>(null); const [isDirty, setIsDirty] = useState(false); useEffect(() => { const saved = localStorage.getItem('doc_' + documentId); if (saved) setContent(saved); }, [documentId]); useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if ((e.metaKey || e.ctrlKey) && e.key === 's') { e.preventDefault(); saveNow(); } }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [content]); const saveNow = async () => { setIsSaving(true); await api.save(documentId, content); localStorage.setItem('doc_' + documentId, content); setIsSaving(false); setIsDirty(false); setLastSaved(new Date()); }; return ( <div> <div>Status: {isSaving ? 'Saving...' : isDirty ? 'Unsaved' : 'Saved'}</div> <textarea value={content} onChange={(e) => { setContent(e.target.value); setIsDirty(true); }} /> </div> ); } Deliver an architectural extraction plan: 1. Separation of Concerns Audit: Break down the component's responsibilities into: (A) Pure UI View, (B) Stateful Business Logic / Orchestration, (C) External Side Effects / Web APIs. 2. Headless Custom Hook Implementation: Author a clean, fully typed custom hook (`use<FeatureName>`) encapsulating all state, effects, and memoized action handlers. 3. Pure Presentational Component: Rewrite the view component to be a pure functional presenter that consumes the custom hook with zero inline business logic. 4. Unit Test for the Custom Hook: Provide a test using `@testing-library/react` `renderHook` proving the hook can be tested without mounting DOM markup.