Set up an Angular Signal Effect Cleanup Handler
Sometimes you will need to properly clean up your effects to prevent memory leaks. Like if you use timeouts or intervals.
Implement cleanup logic using the onCleanup callback. In your effect you can call onCleanup, pass it a callback, and define actions like clearing intervals or unsubscribing from observables when effects are no longer needed.
[00:00] An effect might need to execute some arbitrary code in order to free up the resources used by this effect. This could happen, for instance, when a component or a service gets destroyed and there is simply nobody interested in keeping this effect alive. So let's illustrate such situation by creating a new effect which is going to use a set [00:19] interval built in JavaScript function. We're going to run this effect each 1000 milliseconds and let's also assign it to interval effect property on the component class. What the effect is going to do within the interval is simply console logging what is the value [00:39] of the item service, item signal value. And for readability, let's just display what is the length. So as you can see, this is not the parent component that we have been working on, this is a child which is simply displayed by the parent using an input checkbox. We are controlling [00:59] here the value of the show child, bullying property. Whenever the input gets checked, the show child controls the component so that the child gets created. And whenever the checkbox gets unchecked, the child is destroyed. So let's go back to the child component. [01:20] When I will check the show child component, the child components gets created and an effect should run. So let's see this in action. When the checkbox got checked, we can see that the interval is actually running the console log. Everything seems to be working correctly. However, when we uncheck the checkbox, we [01:40] can see that the interval is still running because there is nobody who has cleared the interval. Things will get even worse when we check and uncheck multiple times since we can see that there is nothing that would clean up the older intervals, so there is a leak. If we want to prevent such leaks, what we should [01:59] do is we should provide an on cleanup callback which is going to register what is the cleanup for a certain situation. So in our case, the on cleanup function is going to accept a callback and all the cleanup logic would be defined here. So let's [02:19] create const timer ID, so the ID of the interval. And what we're going to do is simply clear the interval, given the timer ID, and just to make it more explicit, let's console log just a simple label that the effect has been [02:39] cleaned up. So let's see this in action. After we check the checkbox, we can see that the interval is running. However, when we uncheck the checkbox, we can see that the effect has been cleaned up. Now when we check and uncheck multiple times accordingly, we can see [02:59] that each effect which has been started has already been cleaned up.