{"action":"closed","issue":{"url":"https://api.github.com/repos/adamhaile/surplus/issues/64","repository_url":"https://api.github.com/repos/adamhaile/surplus","labels_url":"https://api.github.com/repos/adamhaile/surplus/issues/64/labels{/name}","comments_url":"https://api.github.com/repos/adamhaile/surplus/issues/64/comments","events_url":"https://api.github.com/repos/adamhaile/surplus/issues/64/events","html_url":"https://github.com/adamhaile/surplus/issues/64","id":316505568,"number":64,"title":"Question: Best Practices Nested Conditionals and Maps in JSX","user":{"login":"ryansolid","id":2768267,"avatar_url":"https://avatars0.githubusercontent.com/u/2768267?v=4","gravatar_id":"","url":"https://api.github.com/users/ryansolid","html_url":"https://github.com/ryansolid","followers_url":"https://api.github.com/users/ryansolid/followers","following_url":"https://api.github.com/users/ryansolid/following{/other_user}","gists_url":"https://api.github.com/users/ryansolid/gists{/gist_id}","starred_url":"https://api.github.com/users/ryansolid/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ryansolid/subscriptions","organizations_url":"https://api.github.com/users/ryansolid/orgs","repos_url":"https://api.github.com/users/ryansolid/repos","events_url":"https://api.github.com/users/ryansolid/events{/privacy}","received_events_url":"https://api.github.com/users/ryansolid/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-04-21T16:29:49Z","updated_at":"2018-04-22T09:32:26Z","closed_at":"2018-04-22T09:32:26Z","author_association":"NONE","body":"The use of JSX for setting up the binding tree is incredibly powerful, and is more performant and less memory intensive than context based binding found in fine grained detection libraries.  However a couple scenarios I've come across that aren't uncommon that I'm not sure the best way to do in Surplus.  Scenarios where the solution is obvious in context based binding but I know the VDOM style plain JS if and map functions wouldn't do the trick with inefficient re-rendering (something VDOM libraries generally don't care about).  There are probably solutions but the problems are a bit more involved so understandably they may not be documented or I just misunderstood the documentation.\r\n\r\n**1.  Numbered Dynamic Lists**\r\n\r\nI'm talking about lists that use the index or second map argument to draw part of the view. I'm not talking about \"non-keyed\" element reuse but where you don't want to generally not redraw the whole mapped template for each item just update that index. In libraries like Knockout there is a $index observable.  With SArray.map memoization prevents redraws, but I'm not quite sure the difference between the different map functions and if there is a way to say only update expressions around the index changing without completely redrawing the whole item the order is changed or items are removed or inserted from the list. \r\n\r\nI realize that OL elements solve this in the simple sense but pretend calculating something off this index is important and the expense of redrawing the whole item is undesirable.\r\n\r\n\r\n**2.  Lists Nested in Related Conditionals**\r\n\r\nThis is the scenario where if a list is empty you don't want to show the whole section (layout and header) including the list. If you decide to show the section based on if todos().length then every time you add or remove and item the conditional refires causing re-evaluation of the computation and redraws the whole list.  I see in TodoMVC example you use CSS to hide the sections which avoids this. The problem here is similar to the intention of SArray.map (or it's variants) where you want to evaluate the incoming value expression independent of evaluating it's mapped template. Is the best course wrapping in a computation to map to S.value so that it only re-evaluates when the resulting expressions value changes? \r\n\r\nThis was the most obvious case but using naked if statements in general have this issue especially if they contain multiple dependency clauses. So I imagine this pattern might be pretty common place. \r\n\r\n\r\nAnyway any help would be appreciated. Let me know if my questions are unclear or if I need to give code examples.\r\n\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"ryansolid"}}