Change Detection - Deep Dive

Transcript

1. RainerHahnekamp Deep Dive Change Detection Rainer Hahnekamp - 29. February 2024 - ngOslo
2. RainerHahnekamp About Me... Professional NgRx https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff • Rainer Hahnekamp ANGULARarchitects.io • Developer / Trainer / Speaker Modern Spring for Angular @RainerHahnekamp
3. RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
4. RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
5. RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
6. RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
7. RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
8. RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
9. RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
10. RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
11. RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
12. RainerHahnekamp Triggers for Change Detection Handled DOM Events Asynchronous Tasks
13. RainerHahnekamp 1. Change Detection with Default Strategy = OnPush = Default 1. Waiting for Events 3. Dirty Marking 4. Change Detection zone.js 2. Event Happens
14. RainerHahnekamp Change Detection: OnPush • Only checks if Component is dirty • No dirty marking by asynchronous task!
15. RainerHahnekamp 2. Change Detection: Click Event in Default Component = OnPush = Default 1. Waiting for Events 3. Dirty Marking 4. Change Detection zone.js 2. Event Happens
16. RainerHahnekamp 3. Change Detection: Click Event in OnPush Component = OnPush = Default 1. Waiting for Events 3. Dirty Marking 2. Event Happens 4. Change Detection zone.js
17. RainerHahnekamp Criteria markForCheck Immutable Property Binding Handled DOM Events async Pipe Signal Change (Local Change Detection) manually via markForCheck
18. RainerHahnekamp 4. Local Change Detection: Signal Change in OnPush Component = OnPush = Default 1. Waiting for Events 3. Dirty Marking 4. Change Detection zone.js 2. Event Happens
19. RainerHahnekamp Change Detection in the Future • Careful with OnPush with zone.js • "Acceptable" with upcoming Scheduler • Simple & Easy with upcoming Signal Components
20. RainerHahnekamp Further Reading and Watching https://medium.com/ngconf/ngrx-signal-store-the-mis sing-piece-to-signals-ac125d804026 https://youtu.be/0PJPZ3rLqrY