title: Props change (redux) resets the local state when using useState - updated
body: <p>I am rewriting my class components into functional components. One component uses both Redux and local-state and I noticed that every time the props (redux state) change, the <code>useState</code> hook is executed, resetting my local state. Is this expected behavior, and how to persist your local-state?</p>
  
  <p>old (simplified)</p>
  
  <pre><code>class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0
      }
    }
  </code></pre>
  
  <p>new</p>
  
  <pre><code>// Count gets reset to 0 every time reduxState changes
  const MyComponent = ({reduxState}) =&gt; {
  
    const [count, setCount] = useState(0)
  </code></pre>
  
  <p>UPDATE - the cause of the problem is not in the refactoring into functional components. I have a parent (Higher Order Component) that re-creates the wrapped component on changes to Redux state. For clarity, here is the somewhat simplified HOC</p>
  
  <pre><code>import React, {useEffect} from 'react'
  import { connect } from 'react-redux'
  
  import { fetchObject } from '../actions/objects'
  import { fetchIfNeeded } from '../utils'
  
  const withObject = ({element}) =&gt; WrappedComponent =&gt; ({id, ...rest}) =&gt; {
    const Fetcher = ({status, object, fetchObject}) =&gt; {
      useEffect(() =&gt; {
        fetchIfNeeded(
          status,
          ()=&gt;fetchObject(element, id),
        )
      })
  
      // THIS SECTION IS THE CAUSE OF MY PROBLEM
      // Handle loading and error status
      if (status &amp;&amp; status.error) return &lt;&gt;error loading: {status.error.message}&lt;/&gt;
      if (status === undefined || object === undefined || status.isFetching) return &lt;&gt;loading&lt;/&gt;
      // END OF SECTION
  
      // Pass through the id for immediate access
      return &lt;WrappedComponent {...{object, status, id}} {...rest} /&gt;
    }
  
    const mapStateToProps = state =&gt; ({
      object: state.data[element][id],
      status: state.objects[element][id]
    })
  
    const mapDispatchToProps = {
      fetchObject
    }
  
    const WithConnect = connect(mapStateToProps, mapDispatchToProps)(Fetcher)
    return &lt;WithConnect/&gt;
  }
  
  export default withObject
  </code></pre>
  
  <p>UPDATE2: The code sample above has been updated to highlight the problematic section. Every time the status changes (e.g. <code>isFetching: true</code>), the hoc returned a different component to reflect this. When it changes again to <code>isFetching: false</code>, a <strong>new</strong> instance of wrapped component is created and returned, losing its original state.</p>
  
  <p>In short, it is a bad idea to return different components from a HOC depending on redux state. This should be handled in the regular component.</p>