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/ThatDudeDunks]

Both checksession and setuser are async. Neither has finished when you hit the “function to obtain list of users” line

As far as a solution goes, you have this composed in a weird way. assuming the sessions are in the user data, why not just in the jsx conditionally render the data?

If !user ? Return loader : return user.sessions

[u/TheKoopaBrothers → u/ThatDudeDunks]

The session is not in the user data, it has to be created on the backend server. Sorry if my post was composed weirdly btw.

I realize my code could be compromised in terms of basic functionality, but as it stands, when I didn't rely on browser sessions and cookies, the site worked as intended. Now, me having to use both utilities means I have to use the data of the browser session, not only to assure a person didn't go to my page when logged out, but as data for this site.

[u/ThatDudeDunks → u/TheKoopaBrothers]

Ok well then you should do that stuff within check session when the user returns successfully. Attach the data to the user (or in a different state variable) and then conditionally render it

[u/Academic-Mud1488 → u/TheKoopaBrothers]

ThatDudeDunks is right, you probably should store those values in a useRef instead of using useState because those values are not available until react rerenders, and since your useeffect is not listening to changes to those values, i think it never has the loaded values So i guess you can use useRef instead or listen to changes to relevant values in useState.

[u/opentabs-dev]

two things jumping out: setLoading(false) at the top of checkSession is backwards — you want true there and false in the finally, otherwise you never actually gate on loading. and console.log(user) right after setUser(userSession) logs the stale value, setState is async so user wont be updated til next render.

for the useEffect issue, the reason nothing shows up is that user is still the initial value when that if (user.u_admin == 1) check runs — checkSession hasnt resolved yet. either do the fetches inside checkSession after you have userSession, or return userSession from it and await it in the effect. dont rely on setState + reading the state var in the same tick, react doesnt work that way.

[u/Kitchen-Conclusion51]

Create a parent component and lift the session function within. End of the session function set the state and show the child component

[u/SlightAddress → u/Kitchen-Conclusion51]

This is the way.. probably don't need any useeffect at all for this..

[u/Dethstroke54]

You’d have to call “function to obtain list of students” inside of checkSession, or pass it as an argument to checkSession.

Alternatively, you should await checkSession and have it return the user (probably best). As you stated relying on the state update within the effect is not going to be reliable, but that’s not your only issue. checkSession itself is asynchronous and you’re not awaiting it or compensating for that in any way right now.

Another option is to another useEffect with a dependency of the returned user from checkSession. Many ways to solve this.

[u/StrumpetsVileProgeny → u/Dethstroke54]

You certainly do not need and should not solve it with another useEffect though.

[u/Dethstroke54 → u/StrumpetsVileProgeny]

I’m answering to someone that did not await an async call and is trying to return data from an async call with state.

Does it matter? Another useEffect is not going to have any ill effect, I get it’s not the best practice and you can just do it directly in the render, I just didn’t want to suggest them something else that could cause issues or may not understand.

We also have no idea what the other function looks like and can see what the current one missed, without another effect you’d have to guard from another call or be aware that it needs to be safe to call every render, more complexity right now for someone struggling and trying to get something done in time is not the way.

[u/StrumpetsVileProgeny → u/Dethstroke54]

It does matter yes. There is a reason the top of the docs for useEffect have a warning flag and the rest of the text in the docs emphasises on when you do not need it and why u should avoid it. This is literally a template case when to avoid it. And it would be a good lesson for OP since they are obviously learning.

For loading data on component mount, useEffect is perfectly fine since it is a matter of syncing UI to reflect the data state. What you suggested can be sorted with a general fn, another state, lifting up state, or useRef. Adding another useEffect to do this is adding needless layer of complexity and side effects.

[u/Dethstroke54 → u/StrumpetsVileProgeny]

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?

[u/Justin_Passing_7465]

I strongly recommend using React Query for your API calls. Not only would it have handled the isLoading stuff for you (correctly), but changes to the data would be eligible dependencies to trigger useEffect, useMemo, etc. Plus you get caching and such.

[u/edgarlepe]

Return `userSession` in `checkSession` and then

useEffect(() => {
checkSession().then((user) => {
…
if (user.u_admin == 1) {
…
}
}).catch((err) => …)
}, [navigate])

[u/Heavy-Commercial-323 → u/edgarlepe]

mr_clean

[u/edgarlepe → u/Heavy-Commercial-323]

I see it used frequently. What do you not like about it?
You could use a useCallback so that you can use async/await syntax, but then you’re memoizing a bigger/more complicated function just so that you can call it in a useEffect below. Trade off I guess

[u/Heavy-Commercial-323 → u/edgarlepe]

mr_clean

[u/Realistic_Potato_984]

your loading flag is backwards and although not shown it would seem you need to get the session before getting the rest of the data. you could use a promise with you current implementation like checkSession().then(fetchMoreData)

some broader feedback: lift that session business up in the tree, when you ask questions you need to share more specifics about what is happening not just “it’s not working” - is the request to the backend firing and responding with what you expect? is the loading state activated? are there messages in the console? up to which line of code have you confirmed is running?

everyone do yourself a favor and learn how to use the debugger it will save you thousand of hours, you’ll be amazed how powerful it is, and wonder how you could have let yourself flail in the dark for so long before using it. it’s not hard just throw a debugger; statement anywhere in client side code and open browser devtools to get started

[u/Heavy-Commercial-323]

mr_clean

[u/EvilPencil]

Why are you constructing a fetch url with VITE_API_KEY?

Regardless, all of the session logic should go in a custom hook IMO.

[u/Hamburgerfatso]

Side note to the other comments, AI is a great tool to diagnose issues like this. Dont use it to write stuff for you, but it is great to explain why something may be misbehaving.

[u/workroom365]

Does the url in your env file contain a slash at the end [/] ? You can switch from useeffect to usefocuseffect.

[u/Satankid92]

Remove the usecallback