0

I'm using setInterval to poll requests and make my app real-time, and I think it might be the culprit why the fetch requests keep coming. This is my React component:

export default class ChatBox extends Component<ChatBoxProps, ChatBoxState> {
  interval = setInterval(() => this.fetchComments(), 500)
  state = {
    comments: [],
    content: '',
  }

  componentDidMount () {
    this.interval = setInterval(() => this.fetchComments(), 500)
    this.scrollToBottom()
  }

  componentDidUpdate () {
    this.scrollToBottom()
  }

  componentWillUnmount () {
    clearInterval(this.interval)
  }

  fetchComments = () => {
    fetchComments().then(comments => {
      this.setState({ comments })
    })
  }
}

Is there a way to prevent this behavior?

1
  • describe better ``Is there a way to prevent this behavior?`. What you want it to do? make a request when? how much time between requests?
    – Vencovsky
    Commented Jan 31, 2019 at 12:07

2 Answers 2

3

You missed this.interval. you have set two intervals. please removed atleast one. you have cleared this.interval not interval.

export default class ChatBox extends Component<ChatBoxProps, ChatBoxState> {

  state = {
    comments: [],
    content: '',
  }

  componentDidMount () {
    this.interval = setInterval(() => this.fetchComments(), 500)
    this.scrollToBottom()
  }

  componentDidUpdate () {
    this.scrollToBottom()
  }

  componentWillUnmount () {
    clearInterval(this.interval)
  }

  fetchComments = () => {
    fetchComments().then(comments => {
      this.setState({ comments })
    })
  }
}
1

You start two intervals and forget about the first one.

The first will be started on instance initialisation and the second in componentDidMount(). But the second will override the reference to the first interval which will then not be removed in componentWillUnmount(). You should set your interval only in componentDidMount() and init it with null:

export default class ChatBox extends Component<ChatBoxProps, ChatBoxState> {
    interval = null;

    componentDidMount () {
        this.interval = setInterval(() => this.fetchComments(), 500);
        /* ... */
    }

    componentWillUnmount () {
        clearInterval(this.interval);
    }

    /* ... */
}
2
  • Thank you for clarifying things. I still have the following dilemma though. Since this.state.comments is updated every 1 second, this.scrollToBottom() is fired off at the same interval which is problematic for me since the user cannot scroll up.
    – Bargain23
    Commented Jan 31, 2019 at 13:40
  • @Bargain23 You should generally never unconditionally trigger anything in componentDidUpdate(). Either scroll to bottom in the setState() callback which you can pass as the second parameter or check for a change of comments in componentDidUpdate() by comparing prevProps, which is the first parameter to componentDidMount() with the current props.
    – trixn
    Commented Jan 31, 2019 at 14:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.