2b:null 2c:["$","title",null,{"children":"Mutability & Updates in Observable | James McNulty | Observable"}] 31:[] 2f:{"id":"0f91f50df6ecc705","slug":"mutability-updates-in-observable","title":"Mutability & Updates in Observable","thumbnail":"3a4932ba914326281af0854a7442139108b0c562e32242ffb07cf1a39b960e18","access_level":"public","create_time":"$D2019-07-12T19:03:48.232Z","update_time":"$D2019-09-17T03:16:40.540Z","view_time":null,"first_public_time":"$D2019-07-12T19:56:52.980Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"3713fd2ab4d84992","login":"jimmcnulty41","name":"James McNulty","avatar_url":"https://avatars-next.observableusercontent.com/2b48f590da324d0186ddf31435410ed1d9a319ab4b4cd1f37968f7d355e4b4de","tier":"starter_2024"},"version":175,"publish_version":175,"role":null,"authored":false,"authors":[{"type":"individual","id":"2254faed97cc3d34","login":"jimmcnulty41","name":"James McNulty","avatar_url":"https://avatars-next.observableusercontent.com/2b48f590da324d0186ddf31435410ed1d9a319ab4b4cd1f37968f7d355e4b4de","tier":null}],"members":[{"type":"individual","id":"2254faed97cc3d34","login":"jimmcnulty41","name":"James McNulty","avatar_url":"https://avatars-next.observableusercontent.com/2b48f590da324d0186ddf31435410ed1d9a319ab4b4cd1f37968f7d355e4b4de","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Mutability & Updates in Observable","cells":[{"id":0,"value":"md`# Mutability & Updates in Observable\n\nObservable is pretty sweet, but coming from React-land, I found myself a bit confused by\nwhen and why cells update (especially while trying to use the stateful classes provided by d3 like d3-force).\n\nUnfortunately, Observable's [introduction to mutable state](https://observablehq.com/@observablehq/introduction-to-mutable-state?collection=@observablehq/introduction) has a lot going on and makes it pretty hard to tell the difference between mutable values and normal cells. \n\nThis notebook aims to demonstrate those differences more succinctly\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`## Updating a primitive value\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"mutable x = 1;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"incrementPrimitive = {\n let el = html``;\n el.onclick = () => mutable x++;\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`## Editing a property\nWhen you edit the property of an object, observable cells will not automatically update, \nregardless of whether the cell references the object itself or the property directly\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`### Editing a mutable object's property`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"mutable obj = ({ x: 1 });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"obj.x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`*^ the cell must be manually retriggered for it to update*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"mutateObject = {\n let el = html``;\n el.onclick = () => obj.x = obj.x + 1;\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`### Editing an immutable object's property`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"immutableObj = ({ x: 1 });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"immutableObj.x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"{\n let el = html``;\n el.onclick = () => immutableObj.x = immutableObj.x + 1;\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`**Note that both of these examples WORK, but the 'observable cell' doesn't seem to realize**\n\nIn order to see the update, you have to retrigger the cell\n(via shift+enter or by toggling the Object view)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md`## Updating an object`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"mutable objToReplace = ({ x: 1 });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"objToReplace.x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"{\n let el = html``;\n el.onclick = () => mutable objToReplace = { ...objToReplace, x: objToReplace.x + 1 };\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`# Note on DOM Objects\n\nI've had quite a bit of confusion when it comes to using the values from elements.\n\nTurns out that the two following sets of cells are not quite equivalent.\n\n\\`viewof\\` allows consumers to automatically update. Linking to the \\`.value\\` of an html element does not.\nThis sort of makes sense given the above, how we don't update consumers when a _property_ updates\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`### using viewof`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"viewof val1 = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"val1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md`### using .value`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"val2 = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"val2.value\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`As with above, forcing a re-trigger of the cell directly above this one will update the value`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"