title: Rewrite a react class component as a functional component
body: <p>I try to use a library <a href="https://github.com/pqina/flip" rel="nofollow noreferrer">Tick</a>, but it only has a <a href="https://codesandbox.io/s/react-flip-demo-txoux?file=/src/Flip.js" rel="nofollow noreferrer">demo</a>, which is written in React class component.</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import Tick from &quot;@pqina/flip&quot;;
  import &quot;@pqina/flip/dist/flip.min.css&quot;;
  
  export default class Flip extends React.Component {
    constructor(props) {
      super(props);
      this._tickRef = React.createRef();
    }
  
    componentDidMount() {
      this._tickInstance = Tick.DOM.create(this._tickRef.current, {
        value: this.props.value
      });
    }
  
    componentDidUpdate() {
      if (!this._tickInstance) return;
      this._tickInstance.value = this.props.value;
    }
  
    componentWillUnmount() {
      if (!this._tickInstance) return;
      Tick.DOM.destroy(this._tickRef.current);
    }
  
    render() {
      return (
        &lt;div ref={this._tickRef} className=&quot;tick&quot;&gt;
          &lt;div data-repeat=&quot;true&quot; aria-hidden=&quot;true&quot;&gt;
            &lt;span data-view=&quot;flip&quot;&gt;Tick&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>I'd like to use the library as a Hook component, the following code is what I rewritten:</p>
  <pre class="lang-js prettyprint-override"><code>import Tick from &quot;@pqina/flip&quot;;
  import &quot;@pqina/flip/dist/flip.min.css&quot;;
  import React, { useEffect, useRef, useState } from 'react';
  
  interface IFilpProps {
      value: number
  }
  
  const Filp: React.FC&lt;IFilpProps&gt; = (props) =&gt; {
  
      const ref = useRef&lt;HTMLDivElement&gt;(null);
      const [tickInstance, setTickInstance] = useState&lt;any&gt;();
  
      useEffect(() =&gt; {
          setTickInstance(Tick.DOM.create(ref.current, {
              value: props.value
          }));
          return () =&gt; {
              Tick.DOM.destroy(ref.current);
          }
      }, []);
  
      useEffect(() =&gt; {
          tickInstance?.value &amp;&amp; (tickInstance.value = props.value);
      }, [props.value])
  
      return &lt;div ref={ref} className=&quot;tick&quot;&gt;
          &lt;div data-repeat=&quot;true&quot; aria-hidden=&quot;true&quot;&gt;
              &lt;span data-view=&quot;flip&quot;&gt;Tick&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  </code></pre>
  <p>outside the component, I have a button, every time I click it adds one:</p>
  <pre class="lang-js prettyprint-override"><code>const [flipSecond, setFlipSecond] = useState&lt;number&gt;(0);
  // Omit some not important code
  &lt;Flip value={flipSecond}&gt;&lt;/Flip&gt;
  &lt;button onClick={() =&gt; setFlipSecond(flipSecond+1)}&gt;+1&lt;/button&gt;
  </code></pre>
  <p><a href="https://codesandbox.io/s/react-flip-demo-txoux?file=/src/Flip.js" rel="nofollow noreferrer">The demo which uses class component</a> works fine, but my hook code can't work normally: when I click the '+1' button, the Flip component won't plus 1. Could you help me find out the the reason?</p>