Fetching data and updating the isLoading but setState isn't updating correctly and it always ends up being the initial isLoading state

Question

const App = () => {
    const [user, setUser] = useState({
        name: "",
        organisationName: "",
        id: "",
        isLoading: false,
    });
    useEffect(() => {
        const userId = getUserIdFromParams();
        if (userId) {
            setUser({...user, isLoading: true}); // dispatch(STARTED_FETCHING_LEAD)
            (async () => {
                const retrievedUser = await getLeadFromDatabase(leadId);
                if (retrievedUser) setUser({...user, ...retrievedUser});
            })();
        }
        setUser({...user, isLoading: false});
    }, []);

What I expect to happen is the following:

if there is userId in the URL parameters, isLoading is set to true (component updates accordingly). Then when a user is retrieved, the state will be set to the user details and then finally the state is updated one last time to isLoading false.

What happens:

State doesn't update accordingly and it always ends up being the same state as the one set in useState. So if I set isLoading: true in the original state. The loading component will be shown indefinitely, when I set to false it ends up being false.

Anyone has any idea what's going on here? All help is much appreciated:)

Answer 1

1. You don't need to write setUser({...user, isLoading: true}) you can just say setUser({ isLoading: true }) see the docs

2. You retrieve the user asynchronously but reset isLoading to true synchronously. So isLoading will most likely be false before the user is loaded. I would rewrite it like this:

useEffect(() => {
    const userId = getUserIdFromParams();
    if (userId) {
        setUser({...user, isLoading: true}); // dispatch(STARTED_FETCHING_LEAD)
        (async () => {
            const retrievedUser = await getLeadFromDatabase(leadId);
            if (retrievedUser) setUser({...retrievedUser, isLoading: false});
        })();
    }
}, []);