每次组件在 React ContextAPI 下呈现时获取登录用户

Question

I'm using ContextAPI in a small React project, I use HttpOnly Cookie to store the user's token when I hit the /login endpoint.

This is UserContext.js shown bellow, which encapsulates all the components (children) in App.js

import axios from "axios";
import { createContext, useEffect, useState } from "react";

const UserContext = createContext();

const UserContextProvider = ({ children }) => {
  const [loggedUser, setLoggedUser] = useState(undefined);

  const checkLoggedIn = async () => {
    const response = await axios.get(`${process.env.REACT_APP_URL}/logged-in`);
    setLoggedUser(response.data);
  };

  useEffect(() => {
    checkLoggedIn();
  }, []);

  return (
    <UserContext.Provider value={{ loggedUser }}>
      {children}
    </UserContext.Provider>
  );
};

export { UserContext };
export default UserContextProvider;

What I understand is when I log in, I setLoggedUser to the state from the /login response, and now it is available for all the children components of the context.

Now I can navigate to all components wrapped by the context and print for example the email of the loggedUser , but what if the email changed while we're logged in? I'll still see the old email on my components because the data is outdated in the state. And what if token got invalidated on the server while we were logged in.. (The only case we'll get updated data is if I refresh the app because that will trigger useEffect in the context provider and refresh the state again)

Should I also pass the checkLoggedIn function through the context's value property to make it available for other components and then use it in UseEffect in every component? Or is there a better solution for this problem?

Answer 1

After the latest comment if you want to check for email on every re-render then you can remove [] from useEffect as stated above in the comments by @abu dujana.

import axios from "axios";
import { createContext, useEffect, useState } from "react";

const UserContext = createContext();

const UserContextProvider = ({ children }) => {
  const [loggedUser, setLoggedUser] = useState(undefined);

  const checkLoggedIn = async () => {
    const response = await axios.get(`${process.env.REACT_APP_URL}/logged-in`);
    setLoggedUser(response.data);
  };

  useEffect(() => {
    checkLoggedIn();
  });

  return (
    <UserContext.Provider value={{ loggedUser }}>
      {children}
    </UserContext.Provider>
  );
};

export { UserContext };
export default UserContextProvider;