title: Invalid hook call which I can't seem to fix
body: <p>title pretty much says it, I've looked at some examples, but none of the fixes really worked for me. I understand it's the const, moving it  within the class and out of the export, no luck. Can't seem to get it working. Anyone got any ideas? Thank you.</p>
  <p>I get the error below at the line <code>const [ws, setWs] = useState();</code></p>
  <p>&quot;Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:</p>
  <ol>
  <li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
  <li>You might be breaking the Rules of Hooks</li>
  <li>You might have more than one copy of React in the same app&quot;</li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>
  export default function PlayerHoc(ComposedComponent) {
    const [ws, setWs] = useState();
    const [roomIp, setRoomIp] = useState();
    
    useEffect(() =&gt; {
      const wsUrl =
        process.env.NODE_ENV == &quot;development&quot;
          ? &quot;ws://localhost:8888&quot;
          : &quot;ws://&quot; + roomIp;
      setWs(new WebSocket(wsUrl));
    }, [roomIp]);
    
    useEffect(() =&gt; {
      if (!ws) return;
      ws.onopen = () =&gt; {
        ws.send(&quot;PlaybackRequest&quot;);
      };
    }, [ws]);
  
  
    class PlayerHoc extends Component {
          shouldComponentUpdate(nextProps) {
        return nextProps.playing || (this.props.playing &amp;&amp; !nextProps.playing);
      }
  
      componentDidUpdate(prevProps) {
        if (prevProps.currentSong.id !== this.props.currentSong.id) {
          const id = this.props.currentSong.id;
          const other = this.props.currentSong.linked_from
            ? this.props.currentSong.linked_from.id
            : null;
          this.props.containsCurrentSong(other ? `${id},${other}` : id);
        }
      }
  
      render = () =&gt; (
        &lt;ComposedComponent
          {...this.props}
          playContext={(context, offset) =&gt; this.props.playSong(context, offset)}
          playSong={() =&gt; this.props.playSong()}
          {...setRoomIp(this.props.roomIp)}
        /&gt;
      );
    }
  //testbug
    const mapStateToProps = state =&gt; {
      return {
        currentSong: state.playerReducer.status
          ? state.playerReducer.status.track_window.current_track
          : {},
        contains: state.libraryReducer.containsCurrent ? true : false,
        trackPosition: state.playerReducer.status
          ? state.playerReducer.status.position
          : 0,
        playing: state.playerReducer.status
          ? !state.playerReducer.status.paused
          : false
      };
    };
  
  
    function nextSong(skip) {
      ws.send(JSON.stringify({ type: &quot;skipSong&quot;, data: skip }))
    }
    function previousSong(prev) {
      ws.send(JSON.stringify({ type: &quot;previousSong&quot;, data: prev }))
    }
    function pauseSong(pause) {
      ws.send(JSON.stringify({ type: &quot;pauseSong&quot;, data: pause }))
    }
    function playSong(play) {
      ws.send(JSON.stringify({ type: &quot;playSong&quot;, data: play }))
    }
    function seekSong(seek) {
      ws.send(JSON.stringify({ type: &quot;seekSong&quot;, data: seek }))
    }
  
    const mapDispatchToProps = dispatch =&gt; {
      return bindActionCreators(
        {
          nextSong,
          previousSong,
          pauseSong,
          playSong,
          seekSong,
  
        },
        dispatch
      );
    };
  
     return connect(mapStateToProps,mapDispatchToProps)(PlayerHoc);
  }
  
  </code></pre>