title: React Hooks setTimeout and clearTimeout
body: <p>I read the 'Using the Effect Hook' doc but I'm still having a hard time cleaning up side effects from <code>useEffect</code> hook. Specifically I have this class component, and I'd like to learn how it can be converted to function component using <code>useEffect</code> hook.</p>
  
  <pre><code>class Alert extends PureComponent {
    componentDidMount() {
      this.handleSetTimeout()
    }
  
    componentDidUpdate() {
      this.handleClearTimeout()
      this.handleSetTimeout()
    }
  
    componentWillUnmount() {
      this.handleClearTimeout()
    }
  
    handleSetTimeout = () =&gt; {
      const { alert: { id, ttl }, handlePopAlert } = this.props
      if (!ttl) return
      this.timeout = setTimeout(() =&gt; handlePopAlert(id), ttl)
    }
  
    handleClearTimeout = () =&gt; {
      if (!this.timeout) return
      clearTimeout(this.timeout)
      this.timeout = null
    }
  
    render() { return (...) }
  }
  </code></pre>