> For the complete documentation index, see [llms.txt](https://notes.lirenxn.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://notes.lirenxn.com/2019-1/wk-notes-11-06-bug-race-virtual-dom-diff.md).

# 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.

```jsx
{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.