[Question] How do you manage virtualization ?

[darkyen]

In scenarios like ListView when virtualization is enabled, there will be two different virtualization techniques at work, winjs trying to re-use the element and react too, how is this case handled ?

[rigdern]

React does not manage the ListView's DOM. Only the ListView manages it. ListView communicates this to React by returning false in shouldComponentUpdate.

Does that answer your question?

[darkyen]

Who renders the element itself ? If I understand it correctly the template designed in react can only be rendered via react ?

[rigdern]

ListView decides when each item is created and rendered. ListView creates an element per item. It's up to the renderer/template to fill in that element with content.

In the case of ReactWinJS, the renderer is expressed as a function which returns a React component (due to ReactWinJS.reactRenderer). When the renderer function is called, it calls React.render to mount a React component inside of the element for the item.

When you scroll a sufficient distance away from the item, ListView will unrealize it to save memory. When it does this, it calls dispose on the item's element. ReactWinJS.reactRenderer implements dispose such that it will unmount the corresponding React component.

[darkyen]

Ah makes sense, there is slight overhead too but makes sense.