Is the state updated when I submit a form in React?

// import React, {useState} from 'react';

​

const App = () => {

    const [data, setData] = React.useState({});

    const handleChange = (e) => {

        const target = e.target;

        setData(state => {

            return {

                ...data,

                [target.name]: target.value

            };

        });

    };

    const handleSubmit = (e) => {

        e.preventDefault();

        console.log(JSON.stringify(data, null, 4));

    };

    return (

        <form onSubmit={handleSubmit}>

          <label><span>Field 1:</span><input name="field1" defaultValue={data.field1} onInput={handleChange} /></label><br />

          <label><span>Field 2:</span><input name="field2" defaultValue={data.field2} onChange={handleChange} /></label><br />

          <label><span>Field 3:</span><input name="field3" defaultValue={data.field3} onBlur={handleChange} /></label><br />

          {/*

              Where:

                onInput calls handleChange function always on when data is input (works similar to onChange)

                onChange calls handleChange function always on when data is changed (called multiple times during value changing)

                onBlur calls handleChange function always on when input lost focus

          */}

          <button type="submit">Submit</button>

          <pre>

            {JSON.stringify(data, null, 4)}

          </pre>

        </form>

    );

};

​

const root = document.querySelector('#root');

ReactDOM.render(<App />, root );

// import React, {useState} from 'react';

​

// Component that simluates async and delayed events (not perfect solution but enought for the example).

//

const Input = ({name, label, value, onInput, onChange, onFocus, onBlur}) => {

    const state = React.useRef('unfocused');

    const handleInput = (e) => {

       setTimeout(() => onInput?.(e), 1000);   // delayed because of some reasone

    };

    const handleChange = (e) => {

       setTimeout(() => onChange?.(e), 1000);  // delayed because of some reasone

    };

    const handleFocus = (e) => {

        if (state.current === 'unfocused') {

            state.current = 'focused';

            onFocus?.(e);

        }

    };

    const handleBlur = (e) => {

        if (state.current === 'focused') {

            state.current = 'changing';

            setTimeout(() => {

                state.current = 'unfocused';

                onBlur?.(e);

            }, 1000);  // delayed because of some reasone

        }

    };

    return (

        <label>

          <span>{label}</span>

          <input

            name={name}

            defaultValue={value}

            onInput={handleInput}

            onChange={handleChange}

            onFocus={handleFocus}

            onBlur={handleBlur}

          />

        </label>

    );

};

​

const App = () => {

    const [ready, setReady] = React.useState(3);

    const [data, setData] = React.useState({});

    const handleChange = (e) => {

        const target = e.target;

        setData(state => {

            return {

                ...data,

                [target.name]: target.value

            };

        });

    };

    const handleFocus = (e) => {

       setReady(state => state - 1);

    };

    const handleBlur = (e) => {

       setReady(state => state + 1);

    };

    const handleSubmit = (e) => {

        e.preventDefault();

        if (ready === 3) {

            //TODO: dava validation (e.g. required fields, etc.)

            //TODO: data sending

            console.log(JSON.stringify(data, null, 4));

        } else {

            //TODO: remember information about submit action and send when all focus lost

        }

    };

    return (

        <form onSubmit={handleSubmit}>

          <Input

            name="field1"

            label="Field 1"

            value={data.field1}

            onFocus={handleFocus}

            onBlur={handleBlur}

            onInput={handleChange}

          />

          <br />

          <Input

            name="field2"

            label="Field 2"

            value={data.field2}

            onFocus={handleFocus}

            onBlur={handleBlur}

            onChange={handleChange}

          />

          <br />

          <Input

            name="field3"

            label="Field 3"

            value={data.field3}

            onFocus={handleFocus}

            onBlur={(e) => {

                handleChange(e);

                handleBlur(e);

            }}

          />

          <br />

          <div>Ready inputs: {ready}</div>

          <button type="submit">Submit</button>

          <pre>

            Preview: {JSON.stringify(data, null, 4)}

          </pre>

        </form>

    );

};

​

const root = document.querySelector('#root');

ReactDOM.render(<App />, root );