How to use the setTimeout in React Hooks
In this post we will give you information about How to use the setTimeout in React Hooks. Hear we will give you detail about How to use the setTimeout in React HooksAnd how to use it also give you demo for it if it is necessary.
we are going to learn about the usage of setTimeout function in React hooks with the help of examples.
What is a setTimeout function?
The setTimeout() function is used to invoke a function or a piece of code after a specified amount of time is completed.
Example:
setTimeout(() => { console.log('you can see me after 2 seconds')}, 2000);Using the setTimeout in React hooks
We can use the setTimeout function in React hooks just like how we use in JavaScript.
In this example, we have used the setTimeout function inside useEffect hook to update the count value from 0 to 1 after a 3000 milliseconds (or 3 seconds) is finished.
import React, { useState, useEffect } from "react";export default function App() { const [count, setCount] = useState(0); useEffect(() => { const timeout = setTimeout(() => { setCount(1); }, 3000); },[]); return ( <div className="App"> <h1>{count}</h1> <button onClick={() => setCount(count + 1)}>Increment</button> </div> );}Note: we have passed empty array [] as a second argument to the useEffect hook so that it only runs when a App functional component is initially rendered into the dom, it is similar like componentDidMount in class components.
Clearing setTimeout
To clear the setTimeout, we need to call the clearTimeout method by passing our timeout variable as an argument.
import React, { useState, useEffect } from "react";export default function App() { const [count, setCount] = useState(0); useEffect(() => { const timeout = setTimeout(() => { setCount(1); }, 3000); return () => clearTimeout(timeout); },[]); return ( <div className="App"> <h1>{count}</h1> <button onClick={() => setCount(count + 1)}>Increment</button> </div> );}Note: returning a function inside useEffect hook is like using a componentWillUnmount() lifecycle method inside class-based react components.
If you want to run a setTimeout function whenever a component state is updated, you need to pass the condition to an empty array [].
import React, { useState, useEffect } from "react";export default function App() { const [count, setCount] = useState(0); useEffect(() => { const timeout = setTimeout(() => { setCount(1); }, 3000); return () => clearTimeout(timeout); },[count]); return ( <div className="App"> <h1>{count}</h1> <button onClick={() => setCount(count + 1)}>Increment</button> </div> );}Here we passed count as a condition to the array so that setTimeout function runs initially and also when a count value is changed.
setTimeout in Class components
This example shows you, how to use the setTimeout in class-based react components.
import React from "react";class App extends React.Component { state = { count: 0 }; componentDidMount() { this.timeout = setTimeout(() => { this.setState({ count: 10 }); }, 3000); } handleIncrement = () => { this.setState({ count: this.state.count + 1 }); }; componentWillUnmount() { clearTimeout(this.timeout); } render() { return ( <div className="App"> <h1>{this.state.count}</h1> <button onClick={this.handleIncrement}>Increment</button> </div> ); }}export default App;Hope this code and post will helped you for implement How to use the setTimeout in React Hooks. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs