AfterRenderEffect is a powerful hook introduced in
#Angular19 🔥
It combines the capabilities of:
👉 effect - it runs on every source signal change,
👉 afterRender - it’s triggered after the DOM is fully rendered and on every change detection cycle.
It is particularly useful for tasks that require the DOM to be fully updated.
For simple cases, you can define a single callback. However, if
#performance optimization is a priority, you can break the process into distinct phases, executed in the following order:
1️⃣ earlyRead - reading DOM properties before its modification.
2️⃣ write - modifying DOM properties.
3️⃣ mixedReadWrite - handles operations that require both reading and writing to the DOM when separation isn’t possible.
4️⃣ read - reading DOM properties after its modification.
Each phase, except earlyRead, receives the value returned by the previous phase, which acts as a dependency.
If you want to learn more about afterRenderEffect and how splitting tasks into phases impacts performance, check out our article Get to Know the AfterRenderEffect.
🔗 Link in the comments!