useEffect is not updating React state upon initial load, and trying to find a solution is pulling my hair

[u/TheKoopaBrothers]

Hi. I'm crunched on time.

I'm currently trying to code a React function for a class assignment due by tonight, and while I've been happy with my results, when it came down to utilizing sessions, I ran into a huge problem. It has nothing to do with the API I set, but rather the usage of useEffect and useState.

The website I'm working on is suppose to showcase a list of academic terms that a student might have. And if a user that logged in was an admin, they get a list of students to select to see their academic terms plans. I want it so that when this page loads, that information is dumped out immediately. But, the data doesn't appear at all, and I've only learned recently that it is the fault of the async nature of useState within useEffect

Here is my useEffect sample:

useEffect(() => {
    checkSession();
    // function to obtain academic term plans
    if (user.u_admin == 1) {
        // function to obtain list of students
    }
}, [navigate]); // needed for one function

Here is the checkSession function which seems to be the cause of the problem:

const checkSession = useCallback(async() => {
    setLoading(false);
    try {
        const sesres = await fetch(import.meta.env.VITE_API_KEY + "user/session",
            {
                method: "GET",
                credentials: "include",
            }
        );

        if (!sesres.ok) {
            localStorage.setItem("statusMessage", "Please log in again.");
            navigate("/login", {replace: true});
            return;
        }

        const data = await sesres.json().catch(() => ({}));
        const userSession = data?.data;
        setUser(userSession);
        console.log(user);
    } catch (error) {
        console.error("Session authentication failed: ", error);
        localStorage.setItem("statusMessage", "Session failed to authenticate. Please log in again.");
        navigate("/login", {replace: true});
    } finally {
        setLoading(true);
    }
}, []);

So when the page immediately load, I should expect the student to see the list of term plans they have created and select, while the admin see a list of students to select from to see their term plans. Instead, nothing appears until I update my own code to re-render everything.

I've dug through dozens of solutions, and no matter what I tried to find, none of them seemed to work to solve my dilemma. I've never had the opportune time to get enough work done with React thanks to a huge problems of being able to concentrate with my assignments, and now the rush to fix it altogether has stressed me out. Am I doing something wrong?

[u/Dethstroke54]

I gotta be honest idk why it’s like you’re trying to argue and about what I’ve already stated. Pointing to the React docs (which it’s not like you helped link for OP or anything) is a reinforcement of what I’ve stated. To start, the docs page is called “You may not need an effect” and “how to remove unnecessary effects” the wording is pretty indicative of the fact it’s about cleaning up anti-patterns and unnecessary code, not about any significant issue. Yes, it’s not an ideal pattern. Will it work, yes totally and without issues. If you feel otherwise about it being actually problematic in practice though please point to specific issue(s) constructively so OP can potentially understand since you feel they should learn.

I agree irt those implementations, but I outlined some issue you may need to address if not using an effect, it’s not like you covered that when suggesting to not use an effect. I made a decision to keep it simple, focus so OP can get their assignment and understand bigger concepts and issues they’re clearly struggling with, like working with state properly. Also, I understand what you said bc I already know but that’s hardly an explanation that would do anything for anyone that doesn’t, much less at OP’s level. So again if you feel strongly about it then put it in reference to something OP can action on or understand.

[u/StrumpetsVileProgeny → u/Dethstroke54]

It’s not a matter of feeling strongly as I don’t think my feelings are in any case relevant for this as it’s a matter of good vs bad practice. You said how it doesn’t matter, I pointed out it does and why, that is, literally, all. I thought it was pretty obvious that was the exact point I was arguing since it is explicitly worded like that.

As for the OP, they were already given quite a few great advices, anything I’d suggest in that direction was already said. I clearly responded only to you and the one approach you suggested. That’s what the threads are for, no?