showing results for - "settimeout useeffect"
Franco
02 Jan 2019
1import { useState, useEffect } from "react";
2
3const delay = 5;
4
5export default function App() {
6  const [show, setShow] = useState(false);
7
8  useEffect(
9    () => {
10      let timer1 = setTimeout(() => setShow(true), delay * 1000);
11
12      // this will clear Timeout
13      // when component unmount like in willComponentUnmount
14      // and show will not change to true
15      return () => {
16        clearTimeout(timer1);
17      };
18    },
19    // useEffect will run only one time with empty []
20    // if you pass a value to array,
21    // like this - [data]
22    // than clearTimeout will run every time
23    // this value changes (useEffect re-run)
24    []
25  );
26
27  return show ? (
28    <div>show is true, {delay}seconds passed</div>
29  ) : (
30    <div>show is false, wait {delay}seconds</div>
31  );
32}
33