data binding issue with array

[aaronpankratz]

Hi,
I have a list defined in an angular directive with a react component embedded using react2angular. When I update the list, the data binding doesn't seem to propagate down to the react component. Any ideas?

https://react2angular-binding-issue-ey652s.stackblitz.io

[aaronpankratz]

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

[ajdaniel]

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.

[aaronpankratz]

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

[everdimension]

@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.

[everdimension]

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.

[ajdaniel]

@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.

[everdimension]

@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.

[ajdaniel]

@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.

[everdimension]

Ok, sure!