Mastering React Test-Driven Development

Cleaning up after useEffect

The useEffect hook we've written has commandToAnimate and isDrawingLine in its dependency list. That means that when either of these values update, the useEffect hook tears down and will be restarted. For the most part, this doesn't affect our application, and since the Drawing component never unmounts, we don't need to worry too much about that. However, one case that we will need to worry about is if the user resets their screen.

If a command is currently animating when the user clicks the Reset button, we don't want the current animation frame to continue. We want to clean that up. Let's add a test for that now:

1. Add the following test at the bottom of test/Drawing.test.js:

it('calls cancelAnimationFrame on ...