Update React component every second

Question

I have been playing around with React and have the following time component that just renders Date now   to the screen   import React    Component   from  react    class TimeComponent extends Component     constructor props       super props       this state     time  Date now            render        return         lt div gt    this state time    lt  div gt               componentDidMount         console log  TimeComponent Mounted             export default TimeComponent    What would be the best way to get this component to update every second to re-draw the time from a React perspective

User · Answer

So you were on the right track  Inside your componentDidMount   you could have finished the job by implementing setInterval   to trigger the change  but remember the way to update a components state is via setState    so inside your componentDidMount   you could have done this   componentDidMount       setInterval      gt       this setState  time  Date now              1000      Also  you use Date now   which works  with the componentDidMount   implementation I offered above  but you will get a long set of nasty numbers updating that is not human readable  but it is technically the time updating every second in milliseconds since January 1  1970  but we want to make this time readable to how we humans read time  so in addition to learning and implementing setInterval you want to learn about new Date   and toLocaleTimeString   and you would implement it like so   class TimeComponent extends Component     state     time  new Date   toLocaleTimeString         componentDidMount       setInterval      gt       this setState   time  new Date   toLocaleTimeString               1000      Notice I also removed the constructor   function  you do not necessarily need it  my refactor is 100  equivalent to initializing site with the constructor   function

User · Answer

The following code is a modified example from React js website   Original code is available here  https   reactjs org  a-simple-component  class Timer extends React Component     constructor props        super props       this state           seconds  parseInt props startTimeInSeconds  10     0               tick         this setState state   gt           seconds  state seconds   1                 componentDidMount         this interval   setInterval      gt  this tick    1000          componentWillUnmount         clearInterval this interval          formatTime secs        let hours     Math floor secs   3600       let minutes   Math floor secs   60    60      let seconds   secs   60      return  hours  minutes  seconds           map v   gt        v  padStart 2   0             filter  v i    gt  v      00     i  gt  0           join              render         return          lt div gt          Timer   this formatTime this state seconds          lt  div gt                ReactDOM render     lt Timer startTimeInSeconds  300    gt     document getElementById  timer-example

User · Answer

Owing to changes in React V16 where componentWillReceiveProps   has been deprecated  this is the methodology that I use for updating a component  Notice that the below example is in Typescript and uses the static getDerivedStateFromProps method to get the initial state and updated state whenever the Props are updated       class SomeClass extends React Component lt Props  State gt      static getDerivedStateFromProps nextProps  Readonly lt Props gt    Partial lt State gt    null       return         time  nextProps time               timerInterval  any     componentDidMount         this timerInterval   setInterval this tick bind this   1000          tick         this setState   time  this props time            componentWillUnmount         clearInterval this timerInterval          render         return  lt div gt  this state time  lt  div gt

User · Answer

Waisky suggested      You need to use setInterval to trigger the change  but you also need to clear the timer when the component unmounts to prevent it leaving errors and leaking memory    If you d like to do the same thing  using Hooks   const  time  setTime    useState Date now      useEffect      gt      const interval   setInterval      gt  setTime Date now     1000     return      gt        clearInterval interval                  Regarding the comments   You don t need to pass anything inside     If you pass time in the brackets  it means run the effect every time the value of time changes  i e   it invokes a new setInterval every time  time changes  which is not what we re looking for  We want to only invoke setInterval once when the component gets mounted and then setInterval calls setTime Date now    every 1000 seconds  Finally  we invoke clearInterval when the component is unmounted   Note that the component gets updated  based on how you ve used time in it  every time the value of time changes  That has nothing to do with putting time in    of useEffect

User · Answer

You need to use setInterval to trigger the change  but you also need to clear the timer when the component unmounts to prevent it leaving errors and leaking memory   componentDidMount       this interval   setInterval      gt  this setState   time  Date now       1000     componentWillUnmount       clearInterval this interval

User · Answer

i myself like setTimeout more that setInterval but didn t find a solution in class based component  you could use sth like this in class based components  class based component and setInterval   x000D   x000D  class Clock extends React Component     constructor props        super props       this state           date  new Date                 componentDidMount         this timerID   setInterval             gt  this tick          1000               componentWillUnmount         clearInterval this timerID          tick         this setState         date  new Date                  render         return         this state date toLocaleTimeString                 ReactDOM render      lt Clock    gt      document getElementById  app      x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 6 3 umd react production min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 6 3 umd react-dom production min js  gt  lt  script gt    lt div id  app    gt  x000D   x000D   x000D   function based component and setInterval  https   codesandbox io s sweet-diffie-wsu1t file  src index js function based component and setTimeout  https   codesandbox io s youthful-lovelace-xw46p

User · Answer

class ShowDateTime extends React Component      constructor           super          this state             curTime   null                   componentDidMount           setInterval       gt            this setState             curTime   new Date   toLocaleString                      1000           render             return             lt div gt               lt h2 gt  this state curTime  lt  h2 gt             lt  div gt

User · Answer

In the component s componentDidMount lifecycle method  you can set an interval to call a function which updates the state    componentDidMount           setInterval      gt  this setState   time  Date now      1000

[javascript] Update React component every second

Examples related to javascript

Examples related to reactjs