Implement task schedule

[ArtiomTr]

The problem

There is an issues with current reactive-forms architecture, because it not enforces task sequence.

Currently, it follows this flow:

sequenceDiagram
    autonumber
    app ->> reactive-forms: setFieldValue
    reactive-forms ->> values stock: setValue
    values stock ->> reactive-forms: batchUpdate
    par 
        reactive-forms ->> reactive-forms: validators (async)
    and
        values stock ->> reactive-forms: State updates
    and
        values stock ->> app: External watches, from app
    end
    Note over values stock, app: All watch updates are running in parallel, after batch update

Loading

As you can see, tasks validators, state updates and external watches are running in parallel. So the issue appears, when some external watch calls setFieldValue - this will eventually make two different validateBranch calls, where first one will try to validate old values copy, and second one will try to validate new values.

Possible solution

This architecture could be used, to prevent "racing condition":

flowchart LR
subgraph stocked
notifySubtree --> |while notification queue is not empty|notifySubtree
notifySubtree --> batchedUpdate
stateUpdate
end
subgraph scheduler
enqueueNotifications --> |on next frame|notifySubtree
enqueueStateUpdates --> |on next frame, if notification queue is empty|stateUpdate
batchedUpdate --> enqueueStateUpdates
end
subgraph reactive-forms
setFieldValue --> enqueueNotifications
batchedUpdate --> validators
end

Loading

Alternative solutions

React team develops scheduler package. However, this package has experimental, undocumented API. Also, this package is relatively large, 4.83 kb production minified build.