hoist-react
hoist-react copied to clipboard
Component prop marked as observable.ref can cause performance issues
Passing an object marked as @observable.ref as a component prop and then accessing it in the top-level component via a getter on the model causes the component's render method to get called in an infinite loop. This was noticed in a client app that was experiencing performance issues.
The toolbox branch cmpProps reproduces the issue - just uncomment line 9 destructuring the getter from the model in DetailsPanel.ts in the Recalls example directory.
Steps to reproduce the issue:
- Object marked as @observable.ref that gets set in its loadAsync method is passed as a component prop.
- The receiving component creates its model, and accesses the component prop via a getter on the model.
- The receiving component accesses the object from its model in the component's top level render method.
Note that in the client app, the presence of auto refresh seemed to be required to create this loop; however, I'm not sure that's the case in the toolbox example as it seems to happen immediately.