title: How can I improve handling state and rerendering a draggable interface
body: <p>I'm working on a calendar component, laying out multiple projects spanning several days. These projecs are rendered from state, and the state is updated when each project is resized (UI lets users change start/end dates by dragging start/end handles in the Project component).</p>
  <p>I got it working, but my approach feels flawed: <a href="https://codesandbox.io/s/calendar-drag-ese61n" rel="nofollow noreferrer">https://codesandbox.io/s/calendar-drag-ese61n</a>?</p>
  <p>It would probably be better if the UI updated with the user's drag position, but not re-render until the drag is over. So, I want to learn how to separate these two.</p>
  <p>(I suppose I could hide the project component when the drag starts, generate its copy with derived state, rerender it as user drags, and then remove it and update main projects' state on drag end,.. but maybe there's something I should be momoizing instead?)</p>