You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
What is observed?
Reactive props are always observed, even if they are used outside of the render.
Why is it bad?
This leads to extra renders when the value changes, which can be problematic for performance if the render is costly or happening many times.
Solution?
When the value of a props is used outside of rendering, it should not be observed and its change should not trigger a re-render.
import{Component,useState,mount,onWillRender}from"@odoo/owl";classGreeterextendsComponent{statictemplate="Greeter";setup(){this.renderCount=0;onWillRender(()=>{this.renderCount++});// to notice there is an extra render (it will print 2)setTimeout(()=>this.props.obj.name,150);// accessing value outside of render}}// Main root componentclassRootextendsComponent{staticcomponents={ Greeter };statictemplate="Root"setup(){this.state=useState({obj: {name: 'Hi'}});setTimeout(()=>this.state.obj.name="Hello",300);// changing value, after it was accessed outside of render in child}}mount(Root,document.body,{templates: TEMPLATES,dev: true});
The text was updated successfully, but these errors were encountered:
seb-odoo
changed the title
props (reactive object) should not be observed outside of rendering
[performance] props (reactive object) should not be observed outside of rendering
Mar 29, 2024
seb-odoo
changed the title
[performance] props (reactive object) should not be observed outside of rendering
[perf] props (reactive object) should not be observed outside of rendering
Mar 29, 2024
What is observed?
Reactive props are always observed, even if they are used outside of the render.
Why is it bad?
This leads to extra renders when the value changes, which can be problematic for performance if the render is costly or happening many times.
Solution?
When the value of a props is used outside of rendering, it should not be observed and its change should not trigger a re-render.
Example
playground
Prints:
1
, then2
Expected: only
1
The text was updated successfully, but these errors were encountered: