title: Prevent useState value from being reset when props change
body: <p>I have a component that looks something like this:</p>
  <pre><code>//@flow
  import React, { useState } from &quot;react&quot;;
  
  type Props = {
    likes: int,
    toggleLike: () =&gt; void,
  };
  
  const Foo = (props: Props) =&gt; {
    const [open, setOpen] = useState(false);
    const style = `item${open ? &quot; open&quot;: &quot;&quot;}`;
    return (
      &lt;div className={style} onMouseOver={() =&gt; setOpen(true)} onFocus={() =&gt; setOpen(true)} onMouseOut={() =&gt; setOpen(false)} onBlur={() =&gt; setOpen(false)}&gt;
        &lt;button onClick={props.toggleLike}&gt;Toggle like&lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  export default Foo;
  </code></pre>
  <p>The <code>open</code> state is used to apply the &quot;open&quot; class when moused over. The problem comes if I call the <code>toggleLike()</code> prop function, since this updates the props and the component is rerendered with <code>open</code> reset to false. As the style uses a transition, this results in the animation rerunning as it changes back to false, then to true due to the mouse being over it.</p>
  <p>So, how can I prevent <code>open</code> being reset back to <code>false</code> on each subsequent render? It seems like it should be straightforward, but after going through <a href="https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state" rel="nofollow noreferrer">https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state</a> I can't seem to apply it in my case.</p>