Implementing Undo & Redo Functionality in React Apps Last Updated : 14 Mar, 2024 Comments Improve Suggest changes Like Article Like Report Undo/Redo is a feature used frequently in various applications. React Hooks is a concept to handle and respond to the change of state in React Components. In this article, we will try to implement the Undo/Redo functionality using react hooks thereby increasing your understanding and knowledge of various hooks. Table of Content Understanding the Undo & Redo Functionality:Approach to Implement Undo & Redo FunctionalitySteps to Implement Undo & Redo functionality in React App Understanding the Undo & Redo Functionality:Undo helps in removing the changes that the user has done by mistake or the changes that are no longer required. Redo is reverting the undo action. React Hooks such as useState() and useRef() will be used in this article to implement this functionality. useState() Hook is used to initialize and set the state variables and helps in data binding and useRef() hook responds to the changes in states and helps to track changes without re-rendering the component. Approach to Implement Undo & Redo Functionality:The useState hook is used to manage the state of the input value and an array to store the history of input changes.index is a useRef hook to keep track of the current index in the input history array.undoFunction decrements the index to move back in the input history array and updates the input value accordingly.redoFunction increments the index to move forward in the input history array and updates the input value accordingly.handleInputChange function updates the input value, increments the index, and updates the input history array with the new value.The input element's value and onChange event handler are set to manage the input value and call handleInputChange function respectively.Two buttons, "UNDO" and "REDO", are provided to trigger the undo and redo functionality, respectively. They are disabled when the index is at the start or end of the input history array.Steps to Implement Undo & Redo functionality in React App:Step 1: Create a React App. npx create-react-app my-react-appStep 2: Switch to the project directory. cd my-react-appProject Strucutre:Project StructureExample: Below is an example of implementing Undo/Redo Functionality with React Hooks. JavaScript import React, { useState, useRef } from 'react'; function App() { const [input, setInput] = useState(""); const [inputArray, setInputArray] = useState([input]); const index = useRef(0); const undoFunction = () => { if (index.current > 0) { index.current = index.current - 1; setInput(inputArray[index.current]); } }; const redoFunction = () => { if (index.current < inputArray.length - 1) { index.current = index.current + 1; setInput(inputArray[index.current]); } }; const handleInputChange = (e) => { const newValue = e.target.value; setInput(newValue); index.current = index.current + 1; setInputArray( [...inputArray.slice(0, index.current), newValue] ); }; return ( <div> <h1>Value: {input}</h1> <button onClick={undoFunction} disabled={index.current === 0}> UNDO </button> <button onClick={redoFunction} disabled={index.current === inputArray.length - 1}> REDO </button> <input type="text" value={input} onChange={handleInputChange} /> </div> ); } export default App; Output: OUTPUT FOR UNDO REDO APP GIVEN IN ABOVE CODE SNIPPET Comment More infoAdvertise with us Next Article Implementing Undo & Redo Functionality in React Apps priya gupta 1 Follow Improve Article Tags : Web Technologies ReactJS React-Hooks Similar Reads How to Implement Caching in React Redux applications ? Caching is the practice of storing frequently used or calculated data temporarily in memory or disk. Its main purpose is to speed up access and retrieval by minimizing the need to repeatedly fetch or compute the same information. By doing so, caching helps reduce latency, conserve resources, and ult 3 min read Implementation of React.memo() and useMemo() in React React.memo allows functional component to have same optimization as Pure Component provides for class-based components. useMemo is for memoizing function's calls inside functional component. What is React.memo() ?React.memo() is a higher-order component (HOC) provided by React that memoizes function 3 min read How To Implement Optimistic Updates in Redux Applications? Optimistic updates enhance user experience by making your Redux application feel more responsive. This technique involves updating the UI before receiving confirmation from the server, assuming that the update will succeed. If the server responds with an error, the application can then revert to the 4 min read How To Get Previous State In ReactJS Functional Component? To get the previous state in ReactJS Functional Component we can use the previous value of the state while using the set state method. State can only be directly accessed in the class component so we will be using the react useState hook to accomplish the task.PrerequisitesReact JSReact JS functiona 2 min read Implementing Offline Support with React Hooks and Service Workers In today's digital age, the ability for web applications to function offline has become increasingly important. Whether users are in remote areas with limited internet access, traveling on planes or trains, or simply experiencing intermittent connectivity, having offline support can greatly enhance 7 min read Explain the concept of Redux in React. Redux is a state management library commonly used with React, although it can also be used with other JavaScript frameworks. It helps manage the state of your application. It was inspired by Flux, another state management architecture developed by Facebook for building client-side web applications. 3 min read Persisting State in React App with Redux Persist Redux Persist is a library used to save the Redux store's state to persistent storage, such as local storage, and rehydrate it when the app loads. In this article, we make a simple counter application using React and Redux, demonstrating state persistence using Redux Persist. This project includes i 3 min read Create a To-Do List App using React Redux A To-Do list allows users to manage their tasks by adding, removing, and toggling the completion status for each added item. It emphasizes a clean architecture, with Redux state management and React interface rendering. Todo AppPrerequisites Node.jsReactReact-ReduxApproachCreate a new React project 3 min read Mastering React Routing: Learn Navigation and Routing in React Apps React Routing is a technique used to handle navigation within a React application. It enables users to move between different views, pages, or components without refreshing the entire page, which is a key feature of Single Page Applications (SPAs).In this article, we will explore the essential conce 6 min read Additional Built-in Hooks in React Hooks are functions that allow you to "hook" into the state of a component and provide additional features to ensure the lifespan of functional components. These are available in React versions 16.8.0 and higher. however, we previously used to describe them using classes. We will discuss the various 6 min read Like