data binding issue with array about react2angular HOT 9 CLOSED

Thank you for the explanation and reference documentation! Makes sense.

from react2angular.

Looks like changing the array itself updates the react component but changing the contents of the array does not.

from react2angular.

This is because of the React Component's implementation of prop change detection. If you pass in a react PureComponent, or do not implement a suitable shouldComponentUpdate then react will only re-render when the prop reference changes. You should take a look at the React docs for change detection and PureComponent here: https://reactjs.org/docs/react-api.html#reactpurecomponent.

In summary. The issue lies with your component, not react2angular and your React component needs to react to deep prop changes.

from react2angular.

@ajdaniel As far as I can see, the component in question doesn't implement neither PureComponent, nor shouldComponentUpdate

Therefore it's not the react component that prevents rerendering

It seems that the angular component doesn't trigger a rerender for some reason.

from react2angular.

After looking at the source code, I believe the problem lies here: https://github.com/coatue-oss/ngcomponent/blob/master/index.ts#L42

So basically the ngcomponent lib that react2angular uses implement something similar to a PureComponent. And this conflict with the react paradigm where we just rerender everything without comparing props by default.

from react2angular.

@everdimension well spotted. Yes, this is a replica of PureComponent which means it is only checking if the prop value has changed. This means for example: if a prop is an array, and an item is pushed to that array, the component will not re-render.

I think react2angular should probably not have an opinion on this, as the user should create their own implementation of shouldComponentUpdate() and have total control.

from react2angular.

@ajdaniel

I think react2angular should probably not have an opinion on this

I agree, but currently it does. Which is a problem.
react2angular should not block rerendering by making a shallow comparison.

But at the moment, it seems to be impossible to make a component update after pushing an element to the array because the inner logic of ngcomponent will block rerender.

from react2angular.

@everdimension as this issue is now closed, can you please raise a new issue detailing this information, and stating that we should address this. The solution is yet unknown, but we should track this in a new issue. Thank you.

from react2angular.

Ok, sure!

from react2angular.