[Question] How does POM go about updating the scene?

[aintnorest]

Hi,
I was looking at http://www.rinconstrategies.io/using-react-and-pixijs.html, Which talks about using react with pixijs. I for the most part use https://github.com/reactjs/redux for my state management and was thinking that POM would work incredibly well with it.
Your post said,

"All you have to do is pass the data representation to the manager and let it create the scene for you."

Is there a performance hit to having it recreate the scene on each render instead of calling specific functions to move or edit the existing scene or do you do some type of diffing to tell whats changed and just call the functions needed to change the scene? Sorry If I'm not quite asking the right questions. I've used react for about a year and a half but have been tinkering and reading about pixi for just a week.

[FlorianLudwig]

@aintnorest we don't do any smart updates like react - but it really would be great fit - react and POM, indeed!

Currently - no diffing etc. is done. But the diffing is already done by react using its shadow DOM. Maybe it could be adapted as a shadow-POM ;)

Otherwise we would recreate react within POM. Which might be interesting.

[aintnorest]

So http://calendar.perfplanet.com/2013/diff/ has a really great explanation of how React's diffing process works. A part of what makes it so performant is the way it checks through level by level. In a normal DOM views tend to be very nested taking advantage of the technique. I may be conceptualizing this wrong because I've just started to play with pixi but I can't see my usage being more than 4 levels deep at max. Figure out the minimum number of differences and changing them where performant and deleting and recreating where it isn't still may a good route I'm just not sure you'll get the performance benefits that React does. Also you'd have to reimplement it since it's not designed to work with pixi

On the less work side redux could easily make an update cycle a little more performant. When you change the state in redux you might do something like let newState = {...oldState, x: 19}; because they're different reference points doing a check to see if they equal is really fast letting you know which children to delete and which to keep. just by iterating across them.

I'm still not sure though how pixi / webgl works underneath. Is there a performance penalty to destroying all the children and recreating them like your doing now? If so at how many sprites / images do you start to see the performance hit?

I do think the two technologies with POM could be a really great fit just trying to understand it a bit better.