Page gets reloaded on form submit.Why?

Question

I have implemented a controlled Form using react hooks. I have also added the event.preventDefault() call to the form submit handler. But for some reason, the form submit always causes a page refresh even then. I am not sure why.

I have checked other threads in StackOverflow and checking the answers, what I did is correct. I am just not able

Below is my code.. What am I doing wrong?

import React,{useState} from 'react';
import style from './style.css'
import {Link,useParams} from 'react-router-dom'
import {useDispatch,useSelector} from 'react-redux'
import {builderUpdateRequest,selectBuilders} from "../../data/builder"


const PageBuilderForm=()=>{
    let { id } = useParams();

    const allBuilders=useSelector(selectBuilders)
    const selectedBuilder=allBuilders?allBuilders.find(x=>x.id==id):null;
    const [formData,setFormData]=useState(selectedBuilder)
    const dispatch=useDispatch();

    const onSubmitHandler=(e)=>{ 
        e.preventDefault();
        dispatch(builderUpdateRequest(formData));
    }

    const handleChange=(e)=>{
        const newFormData={ ...formData};
        newFormData[e.currentTarget.name]=e.currentTarget.value;
        setFormData({
            ...newFormData,
        })
    }

    if(selectedBuilder){
        return(
        <div className={style.formContainer}>
            <form className={style.form} onSubmit={onSubmitHandler}>
                <div className={style.formLabel}>Developer Logo Image URL</div>
                <div className={style.formField}><input type="url" name="logo" value={formData.logo} onChange={handleChange} required/></div>


                <div className={style.formLabel}>Developer Name</div>
                <div className={style.formField}><input type="text" name="title" value={formData.title} onChange={handleChange} required/></div>


                <div className={style.formLabel}>Years of Experience</div>
                <div className={style.formField}><input type="number" name="totalExp" value={formData.totalExp} onChange={handleChange} required/></div>


                <div className={style.formLabel}>Projects Count</div>
                <div className={style.formField}><input type="number" name="totalProjects" value={formData.totalProjects} onChange={handleChange} required/></div>


                <div className={style.formLabel}>Description</div>
                <div className={style.formField}><input type="text" name="desc" value={formData.desc} onChange={handleChange} required maxlength={200}/></div>


                <div className={style.formLabel}>Project Name</div>
                <div className={style.formField}><input type="text" name="imgTitle" value={formData.imgTitle} onChange={handleChange} required maxlength={40}/></div>


                <div className={style.formLabel}>Project Location</div>
                <div className={style.formField}><input type="text" name="location" value={formData.location} onChange={handleChange} required maxlength={40}/></div>


                <div className={style.formLabel}>Project image URL</div>
                <div className={style.formField}><input type="url" name="imgURL" value={formData.imgURL} onChange={handleChange} required/></div>

                <div className={style.formField}>
                    <input type="submit" value="Update"/>
                </div>
            </form>
            <Link className={style.home}to="/">Go Home</Link>
        </div>
    )
    }
    else{
        return <Link className={style.home}to="/">Go Home</Link>
    }
    
}

export default PageBuilderForm;

Answer 1

When I use onSubmit as prevent its working like as:

const Submit = (e) => {
    e.preventDefault();
    alert("Information Is Received");
  };

  return (
    <>
      <form onSubmit={Submit}>
        <div className="Dcontainer">
          <h1 className="heading">Hello, {inputValue.uName}</h1>
          <p>{inputValue.email}</p>
          <p>{inputValue.password}</p>
          <input
            type="text"
            placeholder="Enter Your Name"
            name="uName"
            // value ={inputValue.uName}
            onChange={inputEvent}
          />
          <input
            type="email"
            placeholder="Enter Your Email"
            name="email"
            // value={inputValue.email}
            onChange={inputEvent}
          />
          <input
            type="password"
            placeholder="Enter Your Password"
            name="password"
            // value={inputValue.password}
            onChange={inputEvent}
          />
          <button className="primary__btn" type="submit">
            Submit
          </button>
        </div>
      </form>
    </>
  );
};

Answer 2

After debugging some more,I found out that the reload was happening due to the webpack hot reload feature.Once I disabled the hot reload in webpack dev server, my page stopped refreshing on form submit. Pretty weird and surprising as to why this is happening in dev server.I am now curious as to why the dev server is performing a hot reload after an api call to update the data entered in forms.

I modified these settings in webpackDevServer.config.js

watchContentBase: false,
    // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
    // for the WebpackDevServer client so it can learn when the files were
    // updated. The WebpackDevServer client is included as an entry point
    // in the webpack development configuration. Note that only changes
    // to CSS are currently hot reloaded. JS changes will refresh the browser.
   hot: false,