Form submission handling in React - Performance & Optimization

Performance: Form submission handling

MEDIUM IMPACT

This affects how quickly the page responds to user input and how fast the form data is processed and sent, impacting interaction responsiveness and perceived speed.

Handling form submission in React

React

function MyForm() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    await new Promise(resolve => setTimeout(resolve, 0)); // yield to browser
    alert('Form submitted');
  };
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

Using async and yielding to the browser prevents blocking, keeping UI responsive during submission.

📈 Performance GainNon-blocking submission, improves INP by avoiding main thread blocking.

Handling form submission in React

React

function MyForm() {
  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      // heavy synchronous processing
      for(let i=0; i<1000000000; i++) {}
      alert('Form submitted');
    }}>
      <button type="submit">Submit</button>
    </form>
  );
}

Heavy synchronous processing blocks the main thread, causing input lag and delayed UI updates.

📉 Performance CostBlocks rendering for 200+ ms depending on device, causing poor INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Synchronous heavy processing on submit	Minimal	0 immediate, but blocks	High due to blocking	[X] Bad
Async lightweight submit handler	Minimal	0 immediate	Low	[OK] Good
Default form submit with page reload	Full page reload	Many reflows	Very high	[X] Bad
Prevent default + async submit	Minimal	0 immediate	Low	[OK] Good

Rendering Pipeline

Form submission handling affects the main thread during event handling, impacting the browser's ability to update styles, layout, and paint promptly.

→Event Handling

→Style Calculation

→Layout

→Paint

⚠️ BottleneckEvent Handling blocking main thread delays subsequent rendering stages.

Core Web Vital Affected

INP

This affects how quickly the page responds to user input and how fast the form data is processed and sent, impacting interaction responsiveness and perceived speed.

Optimization Tips

1Avoid heavy synchronous code in form submit handlers to keep UI responsive.

2Always call e.preventDefault() to prevent full page reloads on submit.

3Use async operations to handle form data submission without blocking the main thread.

Performance Quiz - 3 Questions

What is the main performance problem with heavy synchronous work inside a form submit handler?

A It blocks the main thread, causing input lag and delayed UI updates.

B It increases the bundle size significantly.

C It causes the browser to skip painting the page.

D It automatically triggers a full page reload.

DevTools: Performance

How to check: Record a performance profile while submitting the form. Look for long tasks blocking the main thread during the submit event.

What to look for: Check for long 'Event Handler' tasks and main thread blocking time; shorter tasks indicate better performance.

Practice

1. What does event.preventDefault() do in a React form submission handler?

easy

A. It automatically submits the form data to the server.

B. It stops the browser from reloading the page when the form is submitted.

C. It clears all the input fields in the form.

D. It resets the component's state to initial values.

Solution

1. Step 1: Understand default form behavior

   By default, submitting a form reloads the page to send data to the server.

2. Step 2: Role of event.preventDefault()

   This method stops the default reload so you can handle submission in React code.

3. Final Answer:

   It stops the browser from reloading the page when the form is submitted. -> Option B

4. Quick Check:

   event.preventDefault() = stops reload [OK]

Hint: Remember: preventDefault stops page reload on submit [OK]

Common Mistakes:

• Thinking preventDefault clears inputs
• Assuming preventDefault submits data automatically
• Confusing preventDefault with resetting state

2. Which of the following is the correct way to attach a submit handler to a form in React?

easy

A.

B.

C.

D.

Solution

1. Step 1: Check React event naming conventions

   React uses camelCase for event handlers, so it must be onSubmit.

2. Step 2: Validate JSX syntax

   Attributes are case-sensitive; onsubmit is incorrect, must be onSubmit.

3. Final Answer:

   <form onSubmit={handleSubmit}> -> Option A

4. Quick Check:

   React event handlers use camelCase = onSubmit [OK]

Hint: React events use camelCase like onSubmit, not lowercase [OK]

Common Mistakes:

• Using lowercase onsubmit instead of onSubmit
• Using non-existent attributes like submit or onsubmitHandler
• Forgetting curly braces around handler function

3. What will be logged to the console when the form below is submitted?

function MyForm() {
  const [name, setName] = React.useState('');
  function handleSubmit(event) {
    event.preventDefault();
    console.log(name);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={e => setName(e.target.value)} />
      <button type="submit">Send</button>
    </form>
  );
}

medium

A. The current value typed in the input field.

B. An empty string always.

C. Undefined because name is not set.

D. The string 'Send' from the button.

Solution

1. Step 1: Understand controlled input behavior

   The input's value is linked to state variable name, updated on every change.

2. Step 2: What happens on submit?

   On submit, handleSubmit logs the current name state, which matches input content.

3. Final Answer:

   The current value typed in the input field. -> Option A

4. Quick Check:

   Controlled input state logs current input [OK]

Hint: Controlled inputs keep state updated; submit logs that state [OK]

Common Mistakes:

• Assuming name is always empty on submit
• Confusing button text with input value
• Forgetting to call event.preventDefault()

4. Identify the error in this React form submission code:

function Form() {
  const [email, setEmail] = React.useState('');
  function handleSubmit() {
    event.preventDefault();
    alert(email);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

medium

A. Button type should be 'button' not 'submit'.

B. Using alert instead of console.log is not allowed.

C. Input value should not be controlled by state.

D. Missing event parameter in handleSubmit function.

Solution

1. Step 1: Check handleSubmit parameters

   The function uses event.preventDefault() but does not receive event as a parameter.

2. Step 2: Why is this a problem?

   Without event parameter, event is undefined, causing a runtime error.

3. Final Answer:

   Missing event parameter in handleSubmit function. -> Option D

4. Quick Check:

   Event must be passed to handler to call preventDefault [OK]

Hint: Always include event parameter to use event.preventDefault() [OK]

Common Mistakes:

• Forgetting to add event parameter
• Thinking alert is disallowed
• Confusing button types for form submission

5. You want to submit a form and then clear the input fields after submission. Which code snippet correctly handles this in React?

function ContactForm() {
  const [message, setMessage] = React.useState('');
  function handleSubmit(event) {
    event.preventDefault();
    console.log(message);
    // What goes here?
  }
  return (
    <form onSubmit={handleSubmit}>
      <textarea value={message} onChange={e => setMessage(e.target.value)} />
      <button type="submit">Send</button>
    </form>
  );
}

hard

A. message = ''; // Directly assign to state variable

B. event.target.reset(); // Reset form DOM directly

C. setMessage(''); // Reset state to empty string

D. window.location.reload(); // Reload page to clear form

Solution

1. Step 1: Understand controlled components

   The textarea's value is controlled by React state message, so clearing input means resetting this state.

2. Step 2: Why setMessage('') works best

   Calling setMessage('') updates state to empty string, clearing the textarea in UI.

3. Final Answer:

   setMessage(''); // Reset state to empty string -> Option C

4. Quick Check:

   Reset controlled input by updating state [OK]

Hint: Clear controlled inputs by setting state to empty string [OK]

Common Mistakes:

• Trying to assign directly to state variable
• Using event.target.reset() which doesn't update React state
• Reloading page instead of clearing state