Optimize react document editor autosave with debounce

Medium

You're implementing an auto-save feature for a document editor. During testing, you notice that the save function is being called too frequently during rapid typing. What's the best way to optimize this code?

ReactDebounceThrottlePerformance optimizationReact hooks

1function DocumentEditor() {
const [content, setContent] = useState('');
const [saveStatus, setSaveStatus] = useState('saved');

async function saveDocument(text) {
  setSaveStatus('saving');
  try {
    await api.saveDocument(text);
    setSaveStatus('saved');
  } catch (err) {
    setSaveStatus('error');
  }
}

function handleChange(e) {
  const newContent = e.target.value;
  setContent(newContent);
  saveDocument(newContent);
}

return (
  <div>
    <textarea 
      value={content} 
      onChange={handleChange}
      placeholder="Start typing..."
    />
    <div>Status: {saveStatus}</div>
  </div>
);
31}

You're implementing an auto-save feature for a document editor. During testing, you notice that the save function is being called too frequently during rapid typing. What's the best way to optimize this code?

Hint