Part 21 React | useRef | Timer task | Stop watch program in React | Focus input element | useEffect скачать в хорошем качестве

Part 21 React | useRef | Timer task | Stop watch program in React | Focus input element | useEffect

In React, the useRef hook is used to get a mutable reference to a DOM element or a value that persists across re-renders. Here are some common use cases for useRef: Accessing DOM elements: You can use useRef to get a reference to a DOM element and then manipulate its properties directly. For example, you might want to focus on an input field when a component mounts, or scroll to a particular section of the page. Storing mutable values: useRef can be used to store mutable values that persist across re-renders, but that don't trigger a re-render when they are updated. This can be useful for things like caching expensive computations, storing event handlers, or managing the state of uncontrolled components. Timer task:- -------- In this example, we use useState to manage the state of the seconds variable, which represents the number of seconds that have elapsed. We also create a ref using useRef to store a reference to the setInterval function that we use to increment the seconds variable. The startTimer function starts the timer by calling setInterval and passing in a function that updates the seconds state variable. We store the setInterval function in the intervalRef so that we can clear it later. The stopTimer function stops the timer by calling clearInterval and passing in the setInterval function that we stored in the intervalRef. The resetTimer function resets the timer by setting the seconds variable to 0 and calling clearInterval to stop the timer. We then render the seconds variable and three buttons that call the startTimer, stopTimer, and resetTimer functions when clicked.