Best Practices for Using Refs

A user presses Send on a message screen that waits three seconds so that the send can be undone. The user then leaves the screen, and three seconds later the message goes out anyway. This defect comes from a ref used without its cleanup, and fixing it shows most of the practices that keep refs safe.

The Undo Send Screen

The screen starts a timer when the user presses Send. To cancel a timer, you need the ID that setTimeout returned, and the Undo handler runs in a later render than the handler that started the timer