{"id":1295,"date":"2019-05-04T19:06:25","date_gmt":"2019-05-04T19:06:25","guid":{"rendered":"http:\/\/upmostlymulti.onpressidium.com\/?p=1295"},"modified":"2021-10-28T10:58:53","modified_gmt":"2021-10-28T15:58:53","slug":"settimeout-in-react-components-using-hooks","status":"publish","type":"post","link":"http:\/\/upmostly.com\/tutorials\/settimeout-in-react-components-using-hooks","title":{"rendered":"setTimeout in React Components Using Hooks"},"content":{"rendered":"\n
\"A<\/figure>\n\n\n\n

Use setTimeout<\/em><\/strong> in your React components to execute a function or block of code after a period of time. Let’s explore how to use setTimeout<\/em><\/strong> in React. There is also a similar method called setInterval<\/em><\/strong>, you can learn more about it from this guide<\/a><\/p>\n\n\n\n

The TL;DR:<\/p>\n\n\n\n

useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n  const<\/span> timer =<\/span> setTimeout<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n    console.<\/span>log<\/span>(<\/span>'This will run after 1 second!'<\/span>)<\/span>\n  }<\/span>,<\/span> 1000<\/span>)<\/span>;<\/span>\n  return<\/span> (<\/span>)<\/span> =><\/span> clearTimeout<\/span>(<\/span>timer)<\/span>;<\/span>\n}<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
What is setTimeout?<\/h2>\n\n\n\n
The setTimeout<\/em><\/strong> method calls a function or runs some code after a period of time, specified using the second argument.<\/p>\n\n\n\n
For example, the code below prints “Hello, World!” to the developer console after 3,000 milliseconds (or 3 seconds).<\/p>\n\n\n\n
setTimeout<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n  console.<\/span>log<\/span>(<\/span>'Hello, World!'<\/span>)<\/span>\n}<\/span>,<\/span> 3000<\/span>)<\/span>;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
Using setTimeout in React Components<\/h2>\n\n\n\n
Using setTimeout<\/em><\/strong> inside of a React component is easy enough as it’s just a regular JavaScript method.<\/p>\n\n\n\n
For instance, let’s use setTimeout<\/em><\/strong> inside of a functional React component<\/a> which uses Hooks. We’ll call setTimeout<\/em><\/strong> inside of the useEffect<\/em><\/strong> Hook, which is the equivalent of the componentDidMount<\/em><\/strong> lifecycle method in Class components.<\/p>\n\n\n\n
App.js<\/div>
import<\/span> React,<\/span> {<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nconst<\/span> App<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n  \n  useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n    const<\/span> timer =<\/span> setTimeout<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n      setCount<\/span>(<\/span>'Timeout called!'<\/span>)<\/span>;<\/span>\n    }<\/span>,<\/span> 1000<\/span>)<\/span>;<\/span>\n    return<\/span> (<\/span>)<\/span> =><\/span> clearTimeout<\/span>(<\/span>timer)<\/span>;<\/span>\n  }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n  return<\/span> (<\/span>\n    <<\/span>div<\/span>><\/span><\/span>\n      Hello, World\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n  )<\/span>;<\/span>\n}<\/span>;<\/span>\n\nexport<\/span> default<\/span> App;<\/span>\n<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
Our functional component runs the useEffect<\/em><\/strong> method when it first renders. If you want to learn more about Hooks, I recommend my tutorial on Simplifying Forms using React Hooks<\/a>.<\/p><\/blockquote>\n\n\n\n
We schedule a new setTimeout <\/em><\/strong>called timer when the App component mounts for the first time.<\/p>\n\n\n\n
As a result, the code inside of the setTimeout<\/em><\/strong> block runs after 1 second as indicated by the 1000 millisecond value that’s passed into the second parameter of the setTimeout<\/em><\/strong> method.<\/p>\n\n\n\n
Clearing setTimeout<\/h2>\n\n\n\n
A setTimeout<\/em><\/strong> timer must be cleared and handle properly, otherwise, you may experience adverse side effects in your code.<\/p><\/blockquote>\n\n\n\n
To clear or cancel a timer, you call the clearTimeout(); method, passing in the timer object that you created into clearTimeout()<\/em><\/strong>.<\/p>\n\n\n\n
For example, the code below shows how to properly clear a timer inside of a functional React component.<\/p>\n\n\n\n
App.js<\/div>
...<\/span>\n\nconst<\/span> App<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n\n  useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n    const<\/span> timer =<\/span> setTimeout<\/span>(<\/span>(<\/span>)<\/span> =><\/span> console.<\/span>log<\/span>(<\/span>\"Hello, World!\"<\/span>)<\/span>,<\/span> 3000<\/span>)<\/span>;<\/span>\n    return<\/span> (<\/span>)<\/span> =><\/span> clearTimeout<\/span>(<\/span>timer)<\/span>;<\/span>\n  }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n}<\/span>;<\/span>\n\n...<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
And an example of clearing setTimeout<\/em><\/strong> inside of a React Class component:<\/p>\n\n\n\n
App.js<\/div>
...<\/span>\n\nclass<\/span> App<\/span> extends<\/span> Component<\/span> {<\/span>\n  let<\/span> timer =<\/span> null<\/span>;<\/span>\n  \n  componentDidMount<\/span>(<\/span>)<\/span> {<\/span>\n    timer =<\/span> setTimeout<\/span>(<\/span>(<\/span>)<\/span> =><\/span> console.<\/span>log<\/span>(<\/span>'Hello, World!'<\/span>)<\/span>,<\/span> 3000<\/span>)<\/span>\n  }<\/span>\n  \n  componentWillUnmount<\/span>(<\/span>)<\/span> {<\/span>\n    clearTimeout<\/span>(<\/span>timer)<\/span>;<\/span>\n  }<\/span>\n}<\/span>\n\n...<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
Above all, it’s important that you clear timers, otherwise you could experience errors in your code.<\/p>\n\n\n\n
You’ll notice that in the first example of clearing a timer inside of a functional component, we’re returning an anonymous function from the useEffect<\/em><\/strong> Hook. This is the equivalent of componentWillUnmount<\/em><\/strong> as shown in the second example.<\/p>\n\n\n\n
setTimeout Gotchas <\/h2>\n\n\n\n
Using a state property inside of a setTimeout does not use the current value of that state property.<\/strong><\/p>\n\n\n\n
I found this odd issue with setTimeout<\/em><\/strong> and state when I was trying to access a state prop inside of setTimeout<\/em><\/strong>.<\/p>\n\n\n\n
Take the example below:<\/p>\n\n\n\n
TimeoutExample.js<\/div>
import<\/span> React,<\/span> {<\/span> useEffect,<\/span> useState }<\/span> from<\/span> 'react'<\/span>;<\/span>\n\nconst<\/span> TimeoutExample<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n  const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n  const<\/span> [<\/span>countInTimeout,<\/span> setCountInTimeout]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n\n  useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n    setTimeout<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n      setCountInTimeout<\/span>(<\/span>count)<\/span>;<\/span> \/\/ count is 0 here<\/span>\n    }<\/span>,<\/span> 3000<\/span>)<\/span>;<\/span>\n    setCount<\/span>(<\/span>5<\/span>)<\/span>;<\/span> \/\/ Update count to be 5 after timeout is scheduled<\/span>\n  }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n  return<\/span> (<\/span>\n    <<\/span>div<\/span>><\/span><\/span>\n      Count: <\/span>{<\/span>count}<\/span>\n      <\/span><<\/span>br<\/span> \/><\/span><\/span>\n      setTimeout Count: <\/span>{<\/span>countInTimeout}<\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n  )<\/span>;<\/span>\n}<\/span>;<\/span>\n\nexport<\/span> default<\/span> TimeoutExample;<\/span>\n<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
You would expect the value of countInTimeout to be 5, but it’s actually 0. <\/p>\n\n\n\n
Huh?! <\/p>\n\n\n\n
setTimeout is a closure, therefore, when setTimeout<\/em><\/strong> is scheduled it uses the value of count at that exact moment in time, which is the initial value of 0.<\/p>\n\n\n\n
To solve this, use the useRef<\/a> Hook:<\/p>\n\n\n\n
function<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n  \n  const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n  const<\/span> countRef =<\/span> useRef<\/span>(<\/span>count)<\/span>;<\/span>\n  countRef.<\/span>current =<\/span> count;<\/span>\n\n  const<\/span> getCountTimeout<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n    setTimeout<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n      setTimeoutCount<\/span>(<\/span>countRef.<\/span>current)<\/span>;<\/span>\n    }<\/span>,<\/span> 2000<\/span>)<\/span>;<\/span>\n  }<\/span>;<\/span>\n  \n  return<\/span> (<\/span>\n    ...<\/span>\n  )<\/span>\n  \n}<\/span>\n\n<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
This solution is thanks to a discussion on Github: https:\/\/github.com\/facebook\/react\/issues\/14010<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Use setTimeout in your React components to execute a function or block of code after a period of time. Let’s explore how to use setTimeout in React.<\/p>\n","protected":false},"author":8,"featured_media":1305,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[33,4,35],"class_list":["post-1295","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-beginner-react-tutorials","tag-react","tag-react-hooks"],"acf":[],"_links":{"self":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/1295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/comments?post=1295"}],"version-history":[{"count":2,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/1295\/revisions"}],"predecessor-version":[{"id":3470,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/1295\/revisions\/3470"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media\/1305"}],"wp:attachment":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media?parent=1295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/categories?post=1295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/tags?post=1295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}