CODEWITHSUNDEEP
react-nativestate-managementreact-context
Jo Momma
Jo Momma

Reputation: 1307

If I update state in the middle of a function, what will be the execution order for the rest of the function?

I'm using the Context API and React functional components with hooks. I have a functional component ProfileForm.js

At the top of this file I call useContext so I can get access to the current state (an array of profile objects).

const {state: {userProfiles}, addProfile, removeProfile, editProfile} = useContext(UserProfilesContext);

For this example I will focus on the function addProfile. When the user clicks the submit button, I want to add the new profile to the global state/context and I want to save the updated list to AsyncStorage.

Here is my handler:

const saveProfileHandler = async(profiles) = >
{
    const {
        firstName, lastName, userPhone, userEmail, userMonth, userDay, userYear,
        userStreet, userCity, userState, userZip,
    }
    = formState.inputValues;

    Keyboard.dismiss();

    if (validateForm()) {
        let month = userMonth;
        let day = userDay;
        if (month.length == = 1) {
            month = `0 $ { userMonth }
            `;
        }
        if (day.length == = 1) {
            day = `0 $ { userDay }
            `;
        }

        const profile = new UserProfile(
            firstName.trim(),
            lastName.trim(),
            userPhone.trim(),
            userEmail.trim(),
            month.trim(),
            day.trim(),
            userYear.trim(),
            userStreet.trim(),
            userCity.trim(),
            userState.trim(),
            userZip.trim(), );

        // add profile to Context object
        addProfile(profile);

        await saveUserProfilesToStorage([... profiles, profile ]);

        navigation.pop();
    }
};

When I call addProfile I update the global state/context, so I know that React will re-render my component. So, I have 2 questions really:

  1. Is it unsafe to rely on the global state value that I just saved. I mean, can I use the updated context state and save that to AsyncStorage or will it not be updated yet and thus unreliable?
  2. After I call addProfile does the rest of the function continue to run before re-rendering from the state update, or does addProfile cause the component to re-render before the rest of the function finishes? If it does re-render in the middle of the function call, when does the rest of the function execute?

Thanks in advance.

Upvotes: 1

Views: 630

Answers (1)

Jo Momma
Jo Momma

Reputation: 1307

This is what I was able to learn. I'll put it up here for others that stumble upon it.

It is important to know that in React, setState() is an asynchronous function. The JavaScript engine is made up of the memory heap and the call stack. The call stack will run all synchronous functions. Along side the JavaScript engine are the Web APIs (provided by the browser) and an Event Loop (callback queue).

When a function is executed it is placed on the call stack and execution begins synchronously. If you call another function from inside the currently running function, the new function will get its own execution context. The current function will pause execution, the new function will execute to completion (assuming no new function calls inside its context) and return control to the first function which will continue execution.

Asynchronous Events

Asynchronous code runs within the Web APIs environment of the browser. This prevents the code from blocking the JavaScript thread/call stack. Callback functions for the asynchronous code are registered in the Web APIs environment. When the callback is ready to be executed it is placed in the callback queue. All callbacks, except those returned by promises, are queued up here.

The callbacks won't be executed until the call stack is empty. Then they will be executed in a FIFO (first in first out) order.

It is also important to know that callbacks from promises (then, catch) don't get put into the callback queue. They go into a micro tasks queue. This queue has priority over the callback queue. This means all of the callbacks from the micro tasks queue will be called before the callback queue's tasks.

In my case, the context update will occur after navigation.pop(); but since the context is global and I'm not updating the UI after the component has unmounted it should be okay.

If I'm wrong on anything I welcome corrections.

Upvotes: 2

Related Questions