{"action":"created","issue":{"url":"https://api.github.com/repos/omniscientjs/omniscient/issues/83","labels_url":"https://api.github.com/repos/omniscientjs/omniscient/issues/83/labels{/name}","comments_url":"https://api.github.com/repos/omniscientjs/omniscient/issues/83/comments","events_url":"https://api.github.com/repos/omniscientjs/omniscient/issues/83/events","html_url":"https://github.com/omniscientjs/omniscient/issues/83","id":59565882,"number":83,"title":"Issues with async rendering (requestAnimationFrame)","user":{"login":"Gozala","id":21236,"avatar_url":"https://avatars.githubusercontent.com/u/21236?v=3","gravatar_id":"","url":"https://api.github.com/users/Gozala","html_url":"https://github.com/Gozala","followers_url":"https://api.github.com/users/Gozala/followers","following_url":"https://api.github.com/users/Gozala/following{/other_user}","gists_url":"https://api.github.com/users/Gozala/gists{/gist_id}","starred_url":"https://api.github.com/users/Gozala/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Gozala/subscriptions","organizations_url":"https://api.github.com/users/Gozala/orgs","repos_url":"https://api.github.com/users/Gozala/repos","events_url":"https://api.github.com/users/Gozala/events{/privacy}","received_events_url":"https://api.github.com/users/Gozala/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-03-02T22:57:21Z","updated_at":"2015-03-03T05:01:12Z","closed_at":null,"body":"We have being discussing [this on gitter](https://gitter.im/omniscientjs/omniscient?at=54f4ce638d79a4a8116b7325) so I though we should have a issue for this.\r\n\r\nShort version is, if your render loop is not in sync with your update loop, you will run into issue like one illustrated here:\r\n\r\n```js\r\nToggleButton({ onClick: event => cursor.set(‘isChecked’, !cursor.get(‘isChecked’))})\r\n```\r\n\r\nThe issues you will run into is that no matter how many times you managed to click with in same render only single update will happen, so if you click twice button won't end up in the same state as it started with.\r\n\r\nSolution that will do the job here are \"reference cursors\", but than it becomes little unclear when to use regular cursors and when to use \"reference\" cursors. There is also the fact that \"reference cursors\" can change under the hood & using them kind of puts you into same shoes as `this.props.isChecked`.\r\n\r\nOm seems to do something different and interesting as described here:\r\nhttps://github.com/omcljs/om/wiki/Cursors#accessing-cursors\r\n\r\nIt has `(defer cursor)` to access current state, so it will be like `.deref()` on reference cursor and it also has `(om/value cursor)` what will return rendered state, which is equivalent of `.deref()` on regular immutable.js cursor. Cool side effect of this is that there is no longer question which type of cursor should be used when. In addition during `render` om cursors act just like immutable.js data structures, which I believe prevents user from causing error state. I've run into that few times myself, if you try to update cursor in render function react will dump warning and will enter into semi broken state.\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/omniscientjs/omniscient/issues/comments/76887589","html_url":"https://github.com/omniscientjs/omniscient/issues/83#issuecomment-76887589","issue_url":"https://api.github.com/repos/omniscientjs/omniscient/issues/83","id":76887589,"user":{"login":"Dashed","id":139499,"avatar_url":"https://avatars.githubusercontent.com/u/139499?v=3","gravatar_id":"","url":"https://api.github.com/users/Dashed","html_url":"https://github.com/Dashed","followers_url":"https://api.github.com/users/Dashed/followers","following_url":"https://api.github.com/users/Dashed/following{/other_user}","gists_url":"https://api.github.com/users/Dashed/gists{/gist_id}","starred_url":"https://api.github.com/users/Dashed/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Dashed/subscriptions","organizations_url":"https://api.github.com/users/Dashed/orgs","repos_url":"https://api.github.com/users/Dashed/repos","events_url":"https://api.github.com/users/Dashed/events{/privacy}","received_events_url":"https://api.github.com/users/Dashed/received_events","type":"User","site_admin":false},"created_at":"2015-03-03T05:01:12Z","updated_at":"2015-03-03T05:01:12Z","body":"To elaborate. This is an issue when the render is tied to some event loop (animation frame, game loop, etc) instead of native JS event loop.\r\n\r\nMultiple user events, which trigger associated event handlers, may occur prior to a render call. The issue is that event handlers may read values from a cursor and then update a cursor with those values.\r\nThus, all event handler calls after the first user event, do not use updated cursors (they became stale); due to the immutable nature of cursors. \r\n\r\nReference cursors would solve this.\r\n\r\n"}}