title: Using React hooks conditionally in Next JS
body: <p>EDIT: This question was originally about a Type error when using React hooks in a CodeSandbox environment but I've updated it so that it's useful to future visitors.</p>
  
  <p>I'm using the following code to try to create a hook for using the scroll position to animate the height of a website header. The trouble is that I've tried various methods to get it to stop it erroring on the server but keep getting various errors (despite checking for the existence of the window object).</p>
  
  <p>There was some example code in my original question and I've updated the following Code Sandbox.</p>
  
  <p><a href="https://codesandbox.io/s/p5y6262qzm" rel="nofollow noreferrer">https://codesandbox.io/s/p5y6262qzm</a></p>
  
  <p>ORIGINAL QUESTION:</p>
  
  <p>Unhandled Rejection (TypeError): Object(…) is not a function</p>
  
  <p>first of all I know that there are other questions with this title but there seems to be multiple causes and I can't find an answer that covers my particular case.</p>
  
  <p>The simplest (incomplete) code I can use to generate the example is this...</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  
  const useScrollPosition = () =&gt; {
    // Store the state
    const [scrollPos, setScrollPos] = useState(window.pageYOffset);
  
    return scrollPos;
  };
  
  export default useScrollPosition;
  </code></pre>
  
  <p>Although there is a more complete example of what I am trying to do in this codesandbox:</p>
  
  <p><a href="https://codesandbox.io/s/p5y6262qzm" rel="nofollow noreferrer">https://codesandbox.io/s/p5y6262qzm</a></p>
  
  <p>I'm guessing it's something real simple, I just can't seem to put my finger on it.</p>