title: How to fix nextCreate is not a function setting up useMemo setting up authentication react router and hooks
body: <p>I'm trying to use context to create a authentication provider for my app. Following a guide for Authentication with react router and react hooks. It's using a memo to fetch authentication if auth changes.</p>
  
  <p>This is the guide i was following 
  <a href="https://medium.com/trabe/implementing-private-routes-with-react-router-and-hooks-ed38d0cf93d5" rel="noreferrer">https://medium.com/trabe/implementing-private-routes-with-react-router-and-hooks-ed38d0cf93d5</a></p>
  
  <p>I've tried looking up the error and working around the memo to no avail.</p>
  
  <p>Here is my provider</p>
  
  <pre><code>const AuthDataContext = createContext(null)
  
  const initialAuthData = {}
  
  const AuthDataProvider = props =&gt; {
    const [authData, setAuthData] = useState(initialAuthData)
  
    useEffect(() =&gt; {
      async function getAuth(){
        let currentAuthData = await fetch("URL/api/v1/logged_in", {
          method: "GET",
          credentials: "include",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
          }
        })
          .then(res =&gt; res.json())
          .then(data =&gt; (data))
          .catch(error =&gt; console.error("Error:", error));
  
          if(currentAuthData) {
            setAuthData(currentAuthData)
          }
      };
      getAuth()
    },[])
  
    const onLogout = () =&gt; setAuthData(initialAuthData);
  
    const onLogin = newAuthData =&gt; setAuthData(newAuthData);
  
    const authDataValue = useMemo({ ...authData, onLogin, onLogout }, [authData]);
    return &lt;AuthDataContext.Provider value={authDataValue} {...props} /&gt;;
  };
  
  export const useAuthDataContext = () =&gt; useContext(AuthDataContext);
  </code></pre>
  
  <p>The PrivateRoute component</p>
  
  <pre><code>const PrivateRoute = ({ component, ...options }) =&gt; {
    const { user } = useAuthDataContext();
    const finalComponent = user ? component : SignInPage;
  
    return &lt;Route {...options} component={finalComponent} /&gt;;
  };
  </code></pre>
  
  <p>The AuthProvider wrapping my app</p>
  
  <pre><code>const MyApp = props =&gt; (
      &lt;BrowserRouter&gt;
        &lt;AuthDataProvider&gt;
          &lt;App /&gt;
        &lt;/AuthDataProvider&gt;
      &lt;/BrowserRouter&gt;
  );
  </code></pre>
  
  <p>I expected the auth provider to fetch the user and Logged_In status and provide it to child components. The private route to see the authData from the context api and only render the route if the user is logged in.
  Thanks in advance!</p>
  
  <p>The useMemo is throwing this error
  nextCreate is not a function
  mountMemo</p>
  
  <pre><code> 13962 |   var hook = mountWorkInProgressHook();
   13963 |   var nextDeps = deps === undefined ? null : deps;
  &gt; 13964 |   var nextValue = nextCreate();
         | ^  13965 |   hook.memoizedState = [nextValue, nextDeps];
   13966 |   return nextValue;
   13967 | }
  </code></pre>
  
  <p>View compiled</p>