I have a react app with sign in/out functionality. I want the application to keep logged in after reloading, and for that I'm using cookies.
The problem is that after I implemented what I thought should work, I get a "warning, maximum update depth exceeded. it can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render" message.

What am I doing wrong?

Thanks a lot!!

Here is the code.

sessions.ts

```
import React from "react";
import * as Cookies from "js-cookie";

export const setSessionCookie = (session: any): void => {
  Cookies.remove("session");
  Cookies.set("session", session, { expires: 14 });
};

export const getSessionCookie: any = () => {
  const sessionCookie = Cookies.get("session");

  if (sessionCookie === undefined) {
    return {};
  } else {
    return JSON.parse(sessionCookie);
  }
};

export const SessionContext = React.createContext(getSessionCookie());

```

main.tsx

```
import React, { useState, useEffect } from "react";
import { Switch, Route, Router } from "react-router-dom";
import Comp1 from "./components";
import Comp2 from "./components";

import { getSessionCookie, SessionContext } from "./session";
import { createBrowserHistory } from "history";

export default function Main() {
  const [session, setSession] = useState(getSessionCookie());
  useEffect(() => {
    setSession(getSessionCookie());
  }, [session]);

  const history = createBrowserHistory();

  return (
    <SessionContext.Provider value={session}>
      <Router history={history}>
      <Switch>
        <Route exact path="/" component={Comp1} />
        <Route path="/comp2" component={Comp2} />
      </Switch>
      </Router>
    </SessionContext.Provider>
  );
}

```