#effect vs afterRenderEffect behavior with a signal read/write in a FormControl

4 messages · Page 1 of 1 (latest)

earnest sparrow
#

There's a custom form control that has a signal read and write in its writeValue method.
If I call setValue on the form control from an afterRenderEffect, it throws the error NG0103 (infinite loop).
If the setValue call is made in an effect, there are no errors thrown.

Is this tracking- or timing-related? (afterRenderEffect marking the component for re-checking while effect doesn't?)
Could someone shed some light on this?

Repro: https://stackblitz.com/edit/eff-afterrendereff-formcontrol-signalread

lilac breach
#

AFAIU, It's timing related. The afterRenderEffect executes... after the rendering. So, after the rendering, its code modifies the value of a signal that is read by the template. So the template is marked as dirty, which triggers a change detection, a re-render, and thus a re-execution of the after render effect, which once again changes the value of the signal, etc. etc.
afterRenderEffect is designed to trigger a function that is used to read or write to the DOM directly. It should never change the state of the application.

earnest sparrow
#

That's what makes intuitive sense - but does this mean that effect runs within the "current" cycle, thus not marking the template as dirty for a subsequent re-trigger?

earnest sparrow
#

I've updated the StackBlitz. If I wrap the setValue call (that in turn reads/writes to the signal inside the FormControl) in untracked, then even afterRenderEffect seems to be working (the same way that effect does).