Component prop marked as observable.ref can cause performance issues

[saba-mo]

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.

[amcclain]

How interesting! Staying tuned - thanks for the comprehensive write up.

[amcclain]

@saba-mo just checking to see if you got any more details here - is it still an actionable Hoist ticket? I didn't want to let it fall through the cracks.

[saba-mo]

No additional details yet. @lbwexler, do you want to look together?

[lbwexler]

its on my shortlist!

…

On Mon, Sep 16, 2024 at 1:08 PM Saba Schuttloffel ***@***.***> wrote: No additional details yet. @lbwexler <https://github.com/lbwexler>, do you want to look together? — Reply to this email directly, view it on GitHub <#3769 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARTL2LPEIEGPK66AY2VMU3ZW4F7LAVCNFSM6AAAAABNI3RSJOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNJTGQ3DMMZVG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>