title: Converting Class app into Hooks for React Next app
body: <p>I am going through documentation for Algolia and Next and am trying to get URLs to show up in the address bar, most of the examples are as Class Components but the app I am working on uses Hooks. I am trying to test some of the examples on my site, but am stuck on how to correctly convert a class app in React to hooks as I keep getting errors.</p>
  <p>Class Example:</p>
  <pre><code>const updateAfter = 400;
  const createURL = (state) =&gt; `?${qs.stringify(state)}`;
  
  const searchStateToUrl = (props, searchState) =&gt;
    searchState ? `${props.location.pathname}${createURL(searchState)}` : '';
  
  const urlToSearchState = ({ search }) =&gt; qs.parse(search.slice(1));
  
  class App extends Component {
    state = {
      searchState: urlToSearchState(this.props.location),
      lastLocation: this.props.location,
    };
  
    static getDerivedStateFromProps(props, state) {
      if (props.location !== state.lastLocation) {
        return {
          searchState: urlToSearchState(props.location),
          lastLocation: props.location,
        };
      }
  
      return null;
    }
  
    onSearchStateChange = searchState =&gt; {
      clearTimeout(this.debouncedSetState);
  
      this.debouncedSetState = setTimeout(() =&gt; {
        const href = searchStateToURL(searchState);
  
        this.props.router.push(href, href, {
          shallow: true
        });
      }, updateAfter);
  
      this.setState({ searchState });
    };
  
  </code></pre>
  <p>My converted attempt:</p>
  <pre><code>
  const createURL = state =&gt; `?${qs.stringify(state)}`;
  
  const pathToSearchState = path =&gt;
    path.includes(&quot;?&quot;) ? qs.parse(path.substring(path.indexOf(&quot;?&quot;) + 1)) : {};
  
  const searchStateToURL = searchState =&gt;
    searchState ? `${window.location.pathname}?${qs.stringify(searchState)}` : &quot;&quot;;
  
  const DEFAULT_PROPS = {
    searchClient,
    indexName: &quot;instant_search&quot;
  };
  
  const Page = () =&gt; {
    const [searchState, setSearchState] = useState(&lt;not sure what goes here&gt;)
    const [lastRouter, setRouterState] = useState(router)
  
    Page.getInitialProps = async({ asPath }) =&gt; {
      const searchState = pathToSearchState(asPath);
      const resultsState = await findResultsState(App, {
        ...DEFAULT_PROPS,
        searchState
      });
  
      return {
        resultsState,
        searchState
      };
    }
  
    //unsure how to convert here
    static getDerivedStateFromProps(props, state) {
      if (!isEqual(state.lastRouter, props.router)) {
        return {
             searchState: pathToSearchState(props.router.asPath),
             lastRouter: props.router
        };
        }
  
        return null;
     }
  
    const onSearchStateChange = searchState =&gt; {
      clearTimeout(debouncedSetState);
  
      const debouncedSetState = setTimeout(() =&gt; {
        const href = searchStateToURL(searchState);
  
        router.push(href, href, {
          shallow: true
        });
      }, updateAfter);
  
      setSearchState({ searchState });
    };
  </code></pre>