Wk-notes-11-06-bug-race-virtual-dom-diff

Bug fix: Race condition

In chrome canary, When call setState and update the dom, the previous form got (removed and add again) updated. And the previous form is detached from dom, in which case, prevForm.submit() would not take effect.

{this.state.isLoading || <div>Loading</div>}
<div>
  <form>
    <input/>
  </form>
</div>

In above code, if we do not have key for Loading div and FormWrapper div, react/preact might see the child div nodes in virtual dom changed and replace the whole children list. Nonetheless, if we add key to the divs, virtual dom diff can correctly update them without losing the previous form node, by which, the form.submit() will take effect.