Refresh the react component every 20 seconds

user_3191909 0
Viewed 9030

I have a component in the page in which I want to fetch the latest state of the page by refreshing the component every 30 seconds,

for example in this data is coming from the server and the id and names are constantly added and removed. Instead of refreshing the page manually everytime can we do the refresh of the component Datatable every 30 sec so as to ensure we have the latest data.

How can I do this. Is setInterval the right way or ShouldComponentUpdate will do the trick ?

Edit : Need to just edit the table instead of the whole component

export class DataTable extends React.Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.context.store.dispatch(getData());
    }

    componentDidMount(){
           this.updateTimer = setInterval(() => this.context.store.dispatch(getData()), 30000);
}

componentWillUnmount(){
    clearInterval(this.updateTimer);
}
    
    _getDtableProps() {
        const arr = this.props.getData.data;
        const data = arr.map((d, i) => {
            return {    
                'id': this.formatPathId(d['id']),
                'name': this.formatTime(d['name'])
            }
        })
        return {
            data,
            dtOptions: {
                order: [2, "desc"]
            },
            columns: [
                {
                    data: 'id',
                    title: 'Id',
                    searchable: true
                },
                {
                    data: 'name',
                    title: 'Name',
                    searchable: true
                }
            ]

        }
    }


    render() {
           let tableProps = this._getDtableProps();
            return (       
                <div className={style.container}>
                    <Table {...tableProps}/>
                </div>
                
            );
    }
}
reactjs javascript
3 Answers

Yep, setInterval is the way to go. shouldComponentUpdate wouldn't get called at a schedule.

In a classic class-based component, you'll want to set up a timer in componentDidMount, e.g.

this.updateTimer = setInterval(() => this.loadNewData(), 30000);

and remove it at componentWillUnmount():

clearInterval(this.updateTimer);
AKX_516850

Simple solution is setInterval in componentDidMount method.

componentDidMount() {
   // any your code ....
   this.timer = setInterval(() => {
     // code to refresh your component.
   },30000)
}

 componentWillUnmount() {
    clearInterval(this.timer);
}
user_52517860

Ciao, in this case I use this pattern:

  state = {
     ...
     delay: 30000,
  };

  componentDidMount() {
    this.interval = setInterval(this.tick, this.state.delay);
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevState.delay !== this.state.delay) {
      clearInterval(this.interval);
      this.interval = setInterval(this.tick, this.state.delay);
    }
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }
  tick = () => {
    // load new data here
  }

I put delay on state to modify setInterval delay in case I want increase/reduce interval time.

user_138970650
Related