Multiple events fire causing state to be out of sync with dom
Closed this issue · 3 comments
At one point in my app, there was a user interaction that triggered multiple rapid fire events to take place. I noticed that several of them executed and modified props for that component before it re-rendered. In the case of drag and drop sorting, where the previous state of items, should be in-sync with the view to make the next sorting decision correct, this caused issues for me. Obviously it would normally be hard for a user to trigger events this fast, but my application temporarily allowed for sorting using the wheel event. I since refactored to use a different event.
Basically can it be confirmed that multiple rapid user interactions can trigger several event handlers to fire and modify props each time, before the next render is executed for a component, and is there a standard pattern for handling this?
I'm on hybrids version: 4.2.1
Yes, indeed, it's possible, and the architecture of the library allows for that. There is no re-render process built-in into the component definition like on other libraries. The render property works the same as others, so it uses the observe method to update DOM using the provided function when it's deps change.
What is more important, the way how it works allows avoiding out-of-sync situations because if there two or more changes before the next animation frame, the DOM is only updated once with the last value.
I think you may have created not the strictly declarative structure of your component, so it depends on a sequence of events, but it shouldn't. If you need to update something external when values are changed, use the observe method of the property descriptor.
Makes sense. For my original implementation I relied on indexes for rearranging items. So if two events fired before a rerender occurred, it would cause the user to take action on a stale dom. The indexes in the dom didn't match up with the data. I ended up generating keys on demand for every item to help mitigate what was happening.
If you have any other comments about the subject, feel free to reopen this issue.