propTypes definitions cause unneeded component updates

[pnpetrov]

Hi,

I have a store with an observable list of items. Each item has an id and an observable value.

In the react part I have a List component and a ListItem component. The ListItem component renders the item’s id and value. Next to the value there is a +1 button that increases the item’s value by 1.

The List and ListItem components are observers.

Without propTypes definitions everything is working as expected. If I add a new item to the list only the List component is updated and if I click the +1 button only that specific item is updated.

If I add propTypes definitions to the List and ListItem components on each +1 button click the List component is also updated for some reason. But if I remove the observable properties from the propTypes definition of the ListItem component everything is working as expected.

Example: https://jsfiddle.net/ppetrov/e6ukjvxo/
Every component has a console.log in its render method.

Am I doing something wrong?

Best regards

[sgoll]

I don't think you are doing anything wrong: React does prop type checking in the parent component (in order to output meaningful error messages such as "Check render() method of component X").

These prop type checks result in these observables being reported observed, i.e. they are added as extra dependencies of the parent component (in addition to the child component).

I stumbled upon this issue myself a couple of days ago. Unfortunately, I don't have a solution for this.

It makes using the mobx-react devtools harder because parent components show as changed as well. It also hurts performance somewhat, since two re-renders have to happen: one for the actual component and one for the parent which only accidentally is added as observer (only due to prop type checking).

[mattruby]

Will this be an issue running the prod build of React? I thought React only checks against the propTypes in dev mode?

[mweststrate]

See also mobxjs/mobx#305

[mweststrate]

I think this can be circumvented by having mobx-react provide it's own propTypes, that leverage mobx.untracked, will investigate

[mweststrate]

Made a change where using the propTypes provided by mobx-react will use untracked. This doesn't solve it for the general case though. Either using typescript 😉, or production will avoid this issue. So since this is only a dev problem, a further won't fix for now.

[vkartaviy]

Stumbled upon this issue today when used PropTypes.arrayOf() :(