In some apps, we want to implement undo/redo functionality, which means that we can go back and forth in the state of our app. For example, if we have a text editor in our blog app, we want to provide a feature to undo/redo changes. If you learned about Redux, you might already be familiar with this kind of functionality. Since React now provides a Reducer Hook, we can reimplement the same functionality using only React. The use-undo library provides exactly this functionality.
The useUndo Hook takes the default state object as an argument, and returns an array with the following contents: [ state, functions ].
The state object looks as follows:
- present: The current state
- past: Array of past states (when we undo, we go here)
- future: Array of future states (after undoing, we can redo to go here)
The functions object returns various functions to interact with...